gpt4 book ai didi

html - 无法将链接(形状为 block )移动到中心

转载 作者:太空宇宙 更新时间:2023-11-04 09:57:33 24 4
gpt4 key购买 nike

我只想将 3 个链接(形状成 block )移动到中心。这应该很容易,但我只是不知道该怎么做。居中,如水平居中。这可能是一个愚蠢的错误或概念问题。我不想移动框中心的文本,只想移动框。CSS:

<style> 

*{
margin:0;
padding: 0;
box-sizing: border-box;
}
header li{
list-style: none;
}

a:link, a:visited
{
text-decoration: none;
background-color: green;
border: 5px solid black;
color: white;
display: block;
text-align: center;
width: 200px;
position: relative;
margin-left: 240px;
margin-bottom: 5px;
}

a:hover, a:active{
color: black;
background-color: red;
margin-bottom: 10px;
font-size: 1.5em;
}

header li:nth-child(3)
{
font-size: 25px;
}

HTML:

<header>
<ul>

<li><a href="http://www.google.com" target="_blank"> Google</a></li> <!-- notice here how when 9i add "http:// the link will open and if don't it won't-->
<li><a href="www.facebook.com" target="_blank"> Facebook </a></li>
<li><a href="www.wikipedia.com" target="_blank"> Wikipedia </a></li>
</ul>
</header>

最佳答案

如何将整个无序列表显示为内联 block 并将标题中的文本内容居中,使列表居中:

header{
text-align: center;
}

header > ul{
display: inline-block;
}

JSFiddle

注意:我删除了 anchor 的边距,因为我认为这是让它们更居中的尝试。如果我错了,请纠正我。

关于html - 无法将链接(形状为 block )移动到中心,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38592904/

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