Как отобразить два горизонтальных неупорядоченных списка на одной строке?

Я пытаюсь воссоздать главную страницу Google как упражнение HTML, и у меня возникают проблемы с нижним колонтитулом, который отображает два набора ссылок в одной строке, каждая с разными выравниваниями: одна выровненная слева, другая справа. Тем не менее, я до сих пор не удалось сделать следующие две задачи одновременно:Как отобразить два горизонтальных неупорядоченных списка на одной строке?

Создать два списка, один выравнивается по левому краю и один правый
Показать оба списка на одной и той же линии

Вот текст моего HTML-файл до сих пор, с соответствующим кодом в колонтитуле тэге:

<!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>

А вот отношение CSS:

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; 
}

источник

2016-08-22 Robert

В вопросах, как, что вы должны сделать онлайн демо на такие услуги, как [тег: jsbin], [тегу: jsfiddle] и т.д. – SaidbakR

Вы, вероятно, хотите, чтобы float ваши списки, например

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

и CSS:

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

https://jsfiddle.net/ox03mtte/

источник

2016-08-22 14:25:01 ca8msm

Это было именно это! Мне просто пришлось менять поля выравнивания текста на поплавки и выравнивание было исправлено! – Robert

Самый простой способ сделать это, чтобы положить каждый из ваших неупорядоченные списки в два отдельных контейнера div.

например/

<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>

Если контейнер выталкивается в строке ниже, это может быть связано с полями. В этом случае вам нужно уменьшить ширину до более низкого процента или удалить поля.

источник

2016-08-22 14:25:53 markthewizard1234

Я бы поместил списки в свои собственные (в вашем «нижнем списке») и удалив классы из тегови <li>. Как это:

<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>

CSS-бы что-то вроде этого:

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

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

Добавить поля/отступы для расстояния между списками.

источник

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; 
}

источник

2016-08-22 15:03:31

Как отобразить два горизонтальных неупорядоченных списка на одной строке?

ответ

Смежные вопросы