以我的導航按鈕爲中心

我嘗試了很多解決方案來集中導航按鈕，但沒有工作，我找不到合適的解決方案。我嘗試了空間，但我希望它響應。以我的導航按鈕爲中心

這裏是我的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

非常感謝！需要一些休息時間！ –

以我的導航按鈕爲中心

回答

相關問題