Question

如何使用此代码

将菜单文本居中（border-bottom）

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

CSS ＆amp;的 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>

感谢...

Answer 1

我不确定问题是什么，所以我只是为你重新整理导航，这里

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位置使用类，除非您有特定的理由使用它们。

Answer 2

使用以下css代码

#main-menu a{
color: #fff;
display: table-cell;
float: right;
left: -180px;
padding: 15px 25px;
position: relative;
text-align: center;
text-decoration: none;
}

Answer 3

#main-menu {
    height: 60px;
    display: table;
    background-color: #555;
    width: 100%;
}

#main-menu a {
    padding: 15px;
    text-decoration: none;
    color: #fff;
    display: table-cell;
    text-align: center;
}

Answer 4

您可以使用此代码：

<强> CSS

.main-menu {
   width:100%;
   height:60px;
   background-color:#555;
}

.main-menu a {
  padding:15px; 
  position: relative;
  text-decoration:none;
  color:#fff;
  display: inline-block;
  text-align:center; 
  outline-width: center;
  border:1px solid #000;
  margin-right:-4px;
  margin-top:10px;
}
.main-menu a:hover:before {
   width:100%;
   left:0;
   position:absolute;
   background:#fa0;
   height:2px;
   bottom:0;
   content:'';
 }

<强> HTML

<div class="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>

jsfiddle example

Answer 5

#main-menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}
a { 
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    float: left;
}

 a:hover:not(.active) {
    background-color: #111;
    color: #ffa500;
    border-bottom:2px solid #ffa500; 
}

.active:hover {
    background-color: #4CAF50;
    color: #ffa500;
    border-bottom:2px solid #ffa500; 
}
,____________________________________html___________________________________,

<html>
    <head>
    </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> 
    </body>
</html>

如何将菜单文本居中（边框底部）

5 个答案: