如何在（底部边框）中心菜单文本

如何我中心与此代码对（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>

感谢...

来源

2017-06-20 M A H

这么多的CSS错误。但现在只需删除'text-indent：85px;'并使用'margin'和'padding'。 – Huelfe

我不是肯定的什么问题是，所以我只是重新设计了导航给你，在这里

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可能会更好，除非您有特定的理由使用它们。

来源

2017-06-20 11:20:22 alexis

使用下面的CSS代码

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

来源

2017-06-20 10:57:28 Anil

#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; 
}

来源

2017-06-20 11:01:43

请添加一些解释如何解决提问者的问题。 – ItamarG3

他已经做了我刚刚用父集表属性进行修改并删除了一些儿童属性 –

您可以使用此代码：

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

来源

2017-06-20 11:06:31

#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>

来源

2017-06-20 11:29:56 Dexter

如何在（底部边框）中心菜单文本

回答

相关问题