Question

我正在尝试将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;
}

Answer 1

您可能希望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/

Answer 2

最简单的方法是将每个无序列表放入两个单独的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>

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

Answer 3

我会将列表放在他们自己的div中（在您的＆＃39;底部列表＆＃39;内），并从<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%;
    }

为列表之间的间距添加边距/填充。

Answer 4

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

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

4 个答案: