个人中心
gpt4 book ai didi

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

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

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

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

CSS 和 HTML

#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
文章推荐： c - 用字符串或另一个字符替换字符
文章推荐： c - struct sockaddr_in -/usr/include/netinet/in.h 中的 "sin_family"在哪里？
文章推荐： c - 一定时间后停止执行程序
文章推荐： javascript - angular-loading-overlay 不显示任何内容