gpt4 book ai didi

html - 如何将菜单文本居中(边框底部)

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

如何使用此代码将菜单文本居中放置在 (border-bottom) 上

请帮我更正下面的html/css代码

CSSHTML

#main-menu {

width:all;
height:60px;
background-color:#555;
}

#main-menu a {
text-indent: 85px;
padding:15px;
position: relative;
text-decoration:none;
color:#fff;
line-height: center;
float:right;
margin:center;
left: -180px;
display: inline-block;
display: table-cell;
text-align:center;
outline-width: center;
}

#main-menu a:hover {
color: #ffa500;
border-bottom:2px solid #ffa500;
}
 
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<title>Hi</title>
<meta charset="utf-8">
</head>
<body>

<div id="main-menu">

<a href="#">Home</a>
<a href="#">Blog</a>
<a href="#">Sign Up</a>
<a href="#">login</a>
<a href="#">call us</a>
<a href="#">vip</a>

</div>
</div>
</div>

</body>
</html>

谢谢...

最佳答案

我不确定问题出在哪里,所以我只是在此处为您重新设计了导航

https://jsfiddle.net/dsvy5exv/17/

  #main-menu {

width:100%;
background-color:#555;
}

#main-menu a{
text-align: center;
padding: 15px 25px;
color: white;
font-size: 1.5em;
text-decoration: none;
display: inline-block;
}

还请记住,覆盖 ID 更难。您可以使用它们,但最好使用类代替 ID,除非您有特定的理由使用它们。

关于html - 如何将菜单文本居中(边框底部),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44651024/

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