gpt4 book ai didi

html - 对齐彼此下方的文本链接

转载 作者:太空宇宙 更新时间:2023-11-04 03:59:47 26 4
gpt4 key购买 nike

我正在尝试将文本链接彼此对齐,但由于某些原因,某些链接不会彼此对齐。

它是这样的:http://i.stack.imgur.com/1gonA.jpg .

这就是我想要实现的:http://i.stack.imgur.com/oH0Ap.jpg

这是目前的代码:

HTML:

    <footer class="footer">
<div class="bottom-column">
<div class="bottom-header">STREETZ</div>
<a class"bottom-link" href="#Home">Home</a>
<a class"bottom-link" href="#About">About us</a>
<a class"bottom-link" href="#Sitemap">Sitemap</a>
<a class"bottom-link" href="#Blog">Blog</a>
<a class"bottom-link" href="#Blog">Privacy Policy</a>
<a class"bottom-link" href="#Blog">Terms of Service</a>

</div>

<div class="bottom-column">
<div class="bottom-header">SUPPORT</div>
<a class"bottom-link" href="#Home">FAQ</a>
<a class"bottom-link" href="#About">Contact us</a>
<a class"bottom-link" href="#Sitemap">Shipping</a>
<a class"bottom-link" href="#Blog">Returns</a>
</div>
</footer>

CSS:

     .footer {
position: relative;
width: 1024px;
height: 200px;
background: #f5f5f5;
margin: 0 auto;
top: 1255px;
border-top: 1px solid #d8d8d8;
}

.bottom-header {
font-size: 14px;
line-height: 20px;
position: relative;
color: #333;
text-transform: uppercase;
}

.bottom-column {
float:left;
display: inline;
font-size: 15px;
width: 105px;
height: 160px;
padding: 20px;
}

.bottom-column a {
text-decoration: none;
color: #6a6a6a;
float: left;
left: 50px;
padding-top: 10px;
font-size: 13px;
}

最佳答案

尝试以下操作:

.bottom-column a {
display: block; //To force the text links to stack on top of one another
}

并从 .bottom-column a {...} 中删除 float:leftfloat 导致链接相互对齐。

这是一个 Fiddle .

关于html - 对齐彼此下方的文本链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22265095/

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