如何在一行上显示两个水平无序列表？

我试图重新创建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

我会把列表放在他们自己的div中（在你的'bottomlist'里面），并从<ul>和<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

如何在一行上显示两个水平无序列表？

回答

相关问题