Wie werden zwei horizontale ungeordnete Listen in einer Zeile angezeigt?

Ich versuche, die Google-Homepage als HTML-Übung neu zu erstellen, und habe Probleme mit der Fußzeile, die zwei Sätze von Links in derselben Zeile mit unterschiedlichen Ausrichtungen anzeigt: eine ausgerichtet links, die andere rechts. Ich habe jedoch noch nicht gelungen, auf einmal dabei die beiden folgenden Aufgaben:Wie werden zwei horizontale ungeordnete Listen in einer Zeile angezeigt?

Erstellen Sie zwei Listen, eine links und eine rechts
Anzeige beide Listen auf der gleichen Linie

Hier ist ausgerichtet

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
    <ul> 
     <li><a href="https://mail.google.com/mail/?tab=wm"> Gmail</a></li> 
     <li><a>Images</a></li> 
     <li><a><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGYAAABmCAMAAAAOARRQAAAANlBMVEX///8AAADg4OAkJCQoKCiFhYWCgoLk5OT7+/vu7u4dHR0YGBggICBERERBQUFHR0eTk5PAwMD3J6laAAAAvUlEQVRoge2YyQ7DIAwFE9YspCX//7PtgVaARHyjFZm5Pj3NybbkaQIAAPgBi1clfknJWgVqFStt/CPonHD4lMS9CPQexUobFeYSrVLiqmB2YuVCo6uOaWqsWEGDBg2am2j6bGh/aJOjn997sxWB2aJYadPpegIMxRpdSfyMx1kF7hQrbdRebY5NXjbNyoVmrA2NBg0aNCNp+hyC942yOflZs2VyihWAm8ATkickGjRo0HTR8ITkCQkAAH/BCztRGS1ttQr7AAAAAElFTkSuQmCC" class="appimg"></a></li> 
     <li><button class="bluebtn">Sign In</button></li> 
    </ul> 
</head> 

<body> 
    <div class = "page-wrap"> 
     <link rel="stylesheet" type="text/css" href="style.css"> 
     <img src = "https://i.kinja-img.com/gawker-media/image/upload/s--pEKSmwzm--/c_scale,fl_progressive,q_80,w_800/1414228815325188681.jpg" class="logo"/> 
     <input type="text"/><br> 

     <div> 
      <button>Google Search</button> 
      <button>I'm Feeling Lucky</button> 
     </div> 


    </div> 
    <footer class="site-footer"> 
     <div class="bottomlist"> 
      <ul class = "left"> 
       <li class="left"><a>Advertising</a></li> 
       <li class="left"><a>Business</a></li> 
       <li class="left"><a>About</a></li> 

      </ul> 
      <ul> 
       <li class="right"><a>Privacy</a></li> 
       <li class="right"><a>Terms</a></li> 
       <li class="right"><a>Settings</a></li> 
      </ul> 
     </div> 
    </footer> 
</body> 


</html>

Und hier ist die entsprechende CSS: so weit, mit dem entsprechenden Code in dem Fußzeile Tag der Text meiner hTML-Datei

ul{ 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    text-align: right; 
} 

ul.left{ 
    text-align: left; 
} 

ul.right{ 
    text-align: right; 
} 

li { 
    display: inline; 
} 

li.right { 
    text-align: right; 
} 

a { 
    color: black; 
    text-decoration: none; 
    font-family: arial,sans-serif; 
    font-size: 13px; 
} 

a:hover{ 
    text-decoration: underline; 
} 

img { 
    display: block; 
    margin: 0 auto; 

} 

img.logo{ 
    height: 50%; 
    width: 50%; 
} 

img.appimg{ 
    display: inline; 
    height: 25px; 
    width: 25px; 
} 

input { 
    display: block; 
    margin: 0 auto; 
    width: 600px; 
    height: 25px; 
} 

div { 
    text-align: center; 
} 

div.bottom{ 
    display: table-cell; 
    vertical-align: text-bottom; 
    border: 1px solid #f00; 
    height: 100px; 
    width: 100px; 
    background-color: 
} 

div.bottomlist{ 
    display: inline; 
    vertical-align: baseline; 
} 

button { 
    margin: 0 auto; 
    font: 13.3333px Arial; 
} 

button.bluebtn{ 
    background-color: blue; 
    color: white; 
    border: 5px solid; 
    border-radius: 10px; 
    height: 40px; 
    width: 75px; 
} 

* { 
    margin: 0; 
} 
html, body { 
    height: 100%; 
} 
.page-wrap { 
    min-height: 100%; 
    /* equal to footer height */ 
    margin-bottom: -142px; 
} 
.page-wrap:after { 
    content: ""; 
    display: block; 
} 
.site-footer, .page-wrap:after { 
    height: 142px; 
} 
.site-footer { 
    background: gray; 
}

Quelle

2016-08-22 Robert

In Fragen wie, dass Sie eine Online-Demo auf Dienste wie machen sollte [tag: jsbin], [tag: jsfiddle] usw. – SaidbakR

Sie wahrscheinlich Ihre Listen wollen

<ul class="left"> 
<li>One</li> 
<li>Two</li> 
</ul> 
<ul class="right"> 
<li>Three</li> 
<li>Four</li> 
</ul>

und die CSS zB auf float:

li {display:inline-block} 
.left {float:left} 
.right {float:right}

https://jsfiddle.net/ox03mtte/

Quelle

2016-08-22 14:25:01 ca8msm

Das genau war es! Ich musste nur meine Text-Align-Felder ändern, um Felder zu floaten und die Ausrichtung wurde behoben! – Robert

Der einfachste Weg, dies zu tun, ist jede Ihrer ungeordnete Listen setzen in zwei getrennte Div-Container.

eg/

<div style="float:left; width:50%;"> 
     <ul style="Display:in-line-block;"> 
     <li>1</li> 
     <li>2</li> 
     </ul> 
</div> 
<div style="float:right; width:50%;"> 
     <ul style="Display:in-line-block;"> 
     <li>1</li> 
     <li>2</li> 
     </ul> 
</div>

Wenn der Behälter unter der Leitung geschoben wird, könnte es aufgrund Margen sein. In diesem Fall sollten Sie die Breite auf einen niedrigeren Prozentsatz reduzieren oder die Ränder entfernen.

Quelle

2016-08-22 14:25:53 markthewizard1234

Ich würde gehen mit der Platzierung der Listen in divs ihrer eigenen (In Ihrem 'unteren Liste') und Entfernen der Klassen von <ul> und <li> Tags. Wie folgt aus:

<div class="bottomlist"> 
     <div class="left"> 
     <ul> 
      <li><a>Advertising</a></li> 
      <li><a>Business</a></li> 
      <li><a>About</a></li> 

         </ul> 
     </div> 

     <div class="right"> 
     <ul> 
      <li><a>Privacy</a></li> 
      <li><a>Terms</a></li> 
      <li><a>Settings</a></li> 
         </ul> 
</div> 
</div>

Die CSS wäre so etwas wie dieses:

#bottomleft .left { 
display: block; 
position: relative; 
float:left; 
width: 50%; 
    } 

#bottomleft .right { 
display: block; 
position: relative; 
float:right; 
width: 50%; 
    }

hinzufügen Ränder/padding für Abstand zwischen den Listen.

Quelle

2016-08-22 14:38:17

<ul id="menu"> 
<li><a href="#logo">Item one</a></li> 
<li><a href="#logo">Item two</a></li> 
</ul> 


#menu{ 
padding:2; 
margin:2; 
color:#fff; 
font-family: arial, helvetica, sans-serif; 
white-space:nowrap; 
list-style-type:none; 
} 
#menu li { 
display:inline; 
} 
#menu li a { 
padding:0.2em 1em; 
background:#fc6; 
color:#000; 
text-decoration:none; 
float:left; 
border:1px solid #000; 
} 
#menu li a:hover{ 
background:#08c; 
color:#fff; 
}

Quelle

2016-08-22 15:03:31

Wie werden zwei horizontale ungeordnete Listen in einer Zeile angezeigt?

Antwort

Verwandte Themen