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

我试图重新创建谷歌主页作为一个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;
}

你可能想要浮动你的列表，例如

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

最简单的方法是将每个无序列表放入两个单独的div容器中。

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>

如果容器被推到下一行，可能是由于空白。在这种情况下，您将需要将宽度减小到较低的百分比或删除边距。

我会把列表放在它们自己的div中(在你的"底部列表"中)，并从<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%;
    }

为列表间添加边距/内边距

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

相关内容

最新更新

热门标签：