以我的导航按钮为中心

我尝试了很多解决方案来集中导航按钮，但没有工作，我找不到合适的解决方案。我尝试了空间，但我希望它响应。以我的导航按钮为中心

这里是我的HTML：

<ul> 

    <li class="btn"><a href="">The performances</a></li> 

    <li class="btn"><a href="">About Us</a></li> 

    <li class="btn"><a href="">Book Now !</a></li> 


</ul>

这里是我的CSS代码：

nav li{ 
    display: inline-block; 
    padding: 10px;} 

nav a{ 
    color:#fff; 
    text-decoration:none; 
} 

nav .btn{ 
    -webkit-border-radius: 17; 
    -moz-border-radius: 17; 
    border-radius: 17px; 
    font-family: Georgia; 
    color: #fff; 
    font-size: 20px; 
    background: #8B0000; 
    padding: 5px 10px 5px 10px; 
    margin:0 auto; 
    text-decoration: none; 
text-align: center;} 

.btn:hover{ 
    background: #A26161; 
    text-decoration: none; 
}

谢谢您的建议！

来源

2017-06-05 Alex Labonne

你在使用Bootstrap吗？ – j08691

你的CSS包含nav元素，但是HTML没有。我加了一个，并且还增加了nav { text-align: center; }：

nav { 
 
    text-align: center; 
 
} 
 

 
nav li { 
 
    display: inline-block; 
 
    padding: 10px; 
 
} 
 

 
nav a { 
 
    color: #fff; 
 
    text-decoration: none; 
 
} 
 

 
nav .btn { 
 
    -webkit-border-radius: 17; 
 
    -moz-border-radius: 17; 
 
    border-radius: 17px; 
 
    font-family: Georgia; 
 
    color: #fff; 
 
    font-size: 20px; 
 
    background: #8B0000; 
 
    padding: 5px 10px 5px 10px; 
 
    margin: 0 auto; 
 
    text-decoration: none; 
 
    text-align: center; 
 
} 
 

 
.btn:hover { 
 
    background: #A26161; 
 
    text-decoration: none; 
 
}

<nav> 
 
    <ul> 
 

 
    <li class="btn"><a href="">The performances</a></li> 
 

 
    <li class="btn"><a href="">About Us</a></li> 
 

 
    <li class="btn"><a href="">Book Now !</a></li> 
 

 

 
    </ul> 
 
</nav>

来源

2017-06-05 16:08:02 Johannes

谢谢你的回答！ –

试试这个解决方案！

nav{ 
 
    text-align: center; 
 
} 
 

 
nav li{ 
 
    display: inline-block; 
 
    padding: 10px;} 
 

 
nav a{ 
 
    color:#fff; 
 
    text-decoration:none; 
 
} 
 

 
nav .btn{ 
 
    -webkit-border-radius: 17; 
 
    -moz-border-radius: 17; 
 
    border-radius: 17px; 
 
    font-family: Georgia; 
 
    color: #fff; 
 
    font-size: 20px; 
 
    background: #8B0000; 
 
    padding: 5px 10px 5px 10px; 
 
    margin:0 auto; 
 
    text-decoration: none; 
 
text-align: center;} 
 

 
.btn:hover{ 
 
    background: #A26161; 
 
    text-decoration: none; 
 
}

<nav> 
 
<ul> 
 

 
    <li class="btn"><a href="">The performances</a></li> 
 

 
    <li class="btn"><a href="">About Us</a></li> 
 

 
    <li class="btn"><a href="">Book Now !</a></li> 
 

 

 
</ul> 
 
</nav>

来源

2017-06-05 16:07:40 LXhelili

感谢您的回答！ –

假设有围绕ul一个nav元素，添加以下CSS样式nav：

nav { 
    text-align: center; 
}

它留给你与以下：

nav { 
 
    text-align: center; 
 
} 
 

 
nav li{ 
 
    display: inline-block; 
 
    padding: 10px; 
 
} 
 

 
nav a { 
 
    color:#fff; 
 
    text-decoration:none; 
 
} 
 

 
nav .btn { 
 
    -webkit-border-radius: 17; 
 
    -moz-border-radius: 17; 
 
    border-radius: 17px; 
 
    font-family: Georgia; 
 
    color: #fff; 
 
    font-size: 20px; 
 
    background: #8B0000; 
 
    padding: 5px 10px 5px 10px; 
 
    margin:0 auto; 
 
    text-decoration: none; 
 
text-align: center; 
 
} 
 

 
.btn:hover { 
 
    background: #A26161; 
 
    text-decoration: none; 
 
}

<nav> 
 
    <ul> 
 

 
    <li class="btn"><a href="">The performances</a></li> 
 

 
    <li class="btn"><a href="">About Us</a></li> 
 

 
    <li class="btn"><a href="">Book Now !</a></li> 
 

 

 
    </ul> 
 
</nav>

来源

2017-06-05 16:14:10

非常感谢！需要一些休息时间！ –

以我的导航按钮为中心

回答

相关问题