gpt4 book ai didi

html - 如何在一行中显示两个水平的无序列表?

转载 作者:太空宇宙 更新时间:2023-11-03 19:56:46 25 4
gpt4 key购买 nike

我正在尝试将 Google 主页重新创建为一个 HTML 练习,但在页脚方面遇到了问题,它在同一行上显示了两组链接,每组链接的对齐方式不同:一个左对齐,另一个右对齐。但是,我还没有成功地同时完成以下两个任务:

  1. 创建两个列表,一个左对齐,一个右对齐
  2. 在同一行显示两个列表

到目前为止,这是我的 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;
}

最佳答案

您可能想要 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/

关于html - 如何在一行中显示两个水平的无序列表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39081966/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com