wie zwei Objekte auf der gleichen Linie zentrieren

Ich versuche, meine Fußzeile Menüelemente zentrieren. Ich habe zwei Elemente in der Fußzeile, ein Copyright und ein Menü. Wie richte ich beide Objekte in der Mitte aneinander an, sodass sie nebeneinander liegen?wie zwei Objekte auf der gleichen Linie zentrieren

Was ich versuche, die Fußzeile zu tun haben

jsfiddle - https://jsfiddle.net/22nqe73q/

.td-pb-span td-sub-footer-copy { 
 
    text-align:center; 
 
    display:inline-block; 
 
} 
 
.td-pb-span td-sub-footer-menu { 
 
    text-align:center; 
 
    display:inline-block; 
 
} 
 
.td-sub-footer-container td-container-wrap { 
 
    text-align:center; 
 
}

<div class="td-sub-footer-container td-container-wrap "> 
 
     <div class="td-container"> 
 
      <div class="td-pb-row"> 
 
       <div class="td-pb-span td-sub-footer-menu"> 
 
         <div class="menu-td-demo-footer-menu-container"><ul id="menu-td-demo-footer-menu" class="td-subfooter-menu"><li id="menu-item-727" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-first td-menu-item td-normal-menu menu-item-727"><a href="#">Disclaimer</a></li> 
 
<li id="menu-item-728" class="menu-item menu-item-type-custom menu-item-object-custom td-menu-item td-normal-menu menu-item-728"><a href="#">Privacy</a></li> 
 
<li id="menu-item-729" class="menu-item menu-item-type-custom menu-item-object-custom td-menu-item td-normal-menu menu-item-729"><a href="#">Advertisement</a></li> 
 
<li id="menu-item-730" class="menu-item menu-item-type-custom menu-item-object-custom td-menu-item td-normal-menu menu-item-730"><a href="#">Contact Us</a></li> 
 
</ul></div>    </div> 
 

 
       <div class="td-pb-span td-sub-footer-copy"> 
 
        © 2017 Site Name    </div> 
 
      </div> 
 
     </div> 
 
    </div>

Quelle

2017-07-19 user7548188

nicht sicher, warum Sie haben so viele div verschachtelte, die nicht benötigt wird, könnte man diejenigen bereinigen möchten.

Aber hier ist die Lösung, div sind Block-Level-Element, müssen Sie sicherstellen, stellen Sie es anzeigen: Inline-Block oder einfach span verwenden.

ul hat standardmäßig 40px Padding übrig, muss das auch überschreiben.

gesetzt ul li sie in einer Reihe inline-block

die vertikale Linie durch border-right: 1px solid #000000; erreicht werden machen wird, aber stellen Sie sicher, dass Sie den folgenden so letzten Punkt nicht über diese Zeile am Ende hat.

ul li:last-child { 
    border-right: none; 
}

.td-pb-span td-sub-footer-copy { 
 
    text-align: center; 
 
    display: inline-block; 
 
} 
 

 
.td-pb-span td-sub-footer-menu { 
 
    text-align: center; 
 
    display: inline-block; 
 
} 
 

 
.td-sub-footer-container td-container-wrap { 
 
    text-align: center; 
 
} 
 

 

 

 

 
.td-container { 
 
    text-align: center; 
 
} 
 

 
.inline, 
 
.inline * { 
 
    display: inline; 
 
} 
 

 
.site-name { 
 
    padding-right: 10px; 
 
    border-right: 1px solid #000000; 
 
} 
 

 
.inline ul { 
 
    padding: 0; 
 
} 
 

 
.inline ul li { 
 
    padding-right: 10px; 
 
    padding-left: 10px; 
 
    border-right: 1px solid #000000; 
 
} 
 

 
.inline ul li:last-child { 
 
    border-right: none; 
 
}

<div class="td-sub-footer-container td-container-wrap "> 
 
    <div class="td-container"> 
 
    <div class="td-pb-row"> 
 
     <span class="td-pb-span td-sub-footer-copy inline site-name">© 2017 Site Name</span> 
 
     <div class="td-pb-span td-sub-footer-menu inline"> 
 
     <div class="menu-td-demo-footer-menu-container"> 
 
      <ul id="menu-td-demo-footer-menu" class="td-subfooter-menu"> 
 
      <li id="menu-item-727" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-first td-menu-item td-normal-menu menu-item-727"><a href="#">Disclaimer</a></li> 
 
      <li id="menu-item-728" class="menu-item menu-item-type-custom menu-item-object-custom td-menu-item td-normal-menu menu-item-728"><a href="#">Privacy</a></li> 
 
      <li id="menu-item-729" class="menu-item menu-item-type-custom menu-item-object-custom td-menu-item td-normal-menu menu-item-729"><a href="#">Advertisement</a></li> 
 
      <li id="menu-item-730" class="menu-item menu-item-type-custom menu-item-object-custom td-menu-item td-normal-menu menu-item-730"><a href="#">Contact Us</a></li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Quelle

2017-07-19 19:04:19

Danke für die Hilfe. Ich versuche ein vorgefertigtes Thema zu bearbeiten, also würde ich es vorziehen, nicht mit den div-Selektoren herumzuhantieren. Gibt es eine Möglichkeit, dass Sie mit dem Code arbeiten können, den ich ursprünglich hatte? - https://jsfiddle.net/22nqe73q/3/ – user7548188

@ user7548188 es ist von Ihrem Code –

@ user7548188 https://jsfiddle.net/dalinhuang/vhuoy4m3/ –

Also zuerst sieht es aus wie Ihre Wähler ein wenig ausgeschaltet sind.

Beispiel: .td-pb-span td-sub-footer-copy

Aber ich denke du meinst: .td-pb-span.td-sub-footer-copy

Aber bis zu dem Punkt der Frage. Sie müssen display: inline-block; auf den Listeneintrag anwenden. So etwas wie:

.menu-item { display: inline-block; }

Quelle

2017-07-19 19:00:09

ich ein pre gemacht Thema bin der Bearbeitung, so dass ich würde sich lieber nicht mit den Selektoren anlegen. Wenn ich Ihr vorgeschlagenes CSS anwende, sind die Menüelemente nebeneinander ausgerichtet, aber sie sind nicht neben dem Copyright. – user7548188

Um das Menü und das Copyright nebeneinander zu bekommen, müssen Sie 'display: inline-block' auf diese Elemente anwenden (.td-sub-footer-menu & .td-sub-footer-copy) –

Ich besuche die jsfiddle - https://jsfiddle.net/22nqe73q/. Und ich bearbeite einige code.Please versuchen für diese.Ich bearbeite einige CSS .Ich setze CSS entsprechend fließen (Eltern zu Kind).

EDITED jsfiddle-https://jsfiddle.net/22nqe73q/5/

Hier sind die Codes:

HTML

<div class="td-sub-footer-container td-container-wrap "> 
     <div class="td-container "> 
      <div class="td-pb-row"> 
       <div class="td-pb-span td-sub-footer-menu"> 
         <div class="menu-td-demo-footer-menu-container"><ul id="menu-td-demo-footer-menu" class="td-subfooter-menu"><li id="menu-item-727" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-first td-menu-item td-normal-menu menu-item-727"><a href="#">Disclaimer</a></li> 
<li id="menu-item-728" class="menu-item menu-item-type-custom menu-item-object-custom td-menu-item td-normal-menu menu-item-728"><a href="#">Privacy</a></li> 
<li id="menu-item-729" class="menu-item menu-item-type-custom menu-item-object-custom td-menu-item td-normal-menu menu-item-729"><a href="#">Advertisement</a></li> 
<li id="menu-item-730" class="menu-item menu-item-type-custom menu-item-object-custom td-menu-item td-normal-menu menu-item-730"><a href="#">Contact Us</a></li> 
</ul></div>    </div> 

       <div class="td-pb-span td-sub-footer-copy"> 
        © 2017 Site Name    </div> 
      </div> 
     </div> 
    </div>

CSS

.td-sub-footer-copy { 
    text-align:center; 
} 
.td-pb-span > .menu-td-demo-footer-menu-container { 
    text-align:center; 
} 

.menu-td-demo-footer-menu-container >ul > li{ 

    list-style-type: none; 
} 
.td-sub-footer-container td-container-wrap { 

    text-align:center; 
}

RESULT

Quelle

2017-07-19 19:09:41

Hier ist eine weitere Lösung für Sie, mit nur vier CSS-Regeln:

.td-pb-row { 
 
    text-align:center; 
 
} 
 

 
.td-subfooter-menu { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.td-sub-footer-copy, 
 
.td-sub-footer-menu, 
 
.menu-item { 
 
    display: inline-block; 
 
} 
 

 
.td-sub-footer-copy::after, 
 
.menu-item:not(:last-of-type)::after { 
 
    content: "|"; 
 
    margin: 0 .4rem; 
 
}

<div class="td-sub-footer-container td-container-wrap "> 
 
    <div class="td-container"> 
 
    <div class="td-pb-row"> 
 
     <div class="td-pb-span td-sub-footer-copy"> 
 
     © 2017 Site Name 
 
     </div> 
 
     <div class="td-pb-span td-sub-footer-menu"> 
 
     <div class="menu-td-demo-footer-menu-container"> 
 
      <ul id="menu-td-demo-footer-menu" class="td-subfooter-menu"> 
 
      <li id="menu-item-727" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-first td-menu-item td-normal-menu menu-item-727"><a href="#">Disclaimer</a></li> 
 
      <li id="menu-item-728" class="menu-item menu-item-type-custom menu-item-object-custom td-menu-item td-normal-menu menu-item-728"><a href="#">Privacy</a></li> 
 
      <li id="menu-item-729" class="menu-item menu-item-type-custom menu-item-object-custom td-menu-item td-normal-menu menu-item-729"><a href="#">Advertisement</a></li> 
 
      <li id="menu-item-730" class="menu-item menu-item-type-custom menu-item-object-custom td-menu-item td-normal-menu menu-item-730"><a href="#">Contact Us</a></li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Quelle

2017-07-19 19:15:06 trevor

wie zwei Objekte auf der gleichen Linie zentrieren

Antwort

Verwandte Themen