0
我正在嘗試將導航欄居中而不會丟失多餘的導航欄。我的意思是我想讓導航欄在整個屏幕上顯示，但導航欄中的文本居中。我發現，如果我改變SS中ul {}的寬度以說明... 28％，它將在屏幕上居中。但我想保持在100％，這樣我就擁有了橫跨整個頂部的導航欄。我怎樣才能將文本置於導航欄中？居中UL導航欄
ul {
list-style-type: NONE;
margin: auto;
padding: 0;
width: 100%;
background-color: #449DA2;
\t text-align: center;
\t font-size: 15px;
\t height: 100%
\t position: fixed;
\t overflow: auto;
}<!DOCTYPE html>
<html>
<head>
<body bgcolor=black>
<style>
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 24px 30px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: gray;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: White;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul>
<li class="dropdown"><a href="#home">Info Page</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">East</a>
<div class="dropdown-content">
<a href="#">Maryland</a>
<a href="#">Massachusetts</a>
<a href="#">New England</a>
<a href="#">New Jersey</a>
<a href="#">Pennsylvania</a>
<a href="#">Virginia</a>
<a href="#">Washington D.C.</a>
</div>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Central</a>
<div class="dropdown-content">
<a href="#">Illinois</a>
<a href="#">Indiana</a>
<a href="#">Michigan</a>
<a href="#">Minnesota</a>
<a href="#">Texas</a>
</div>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">South</a>
<div class="dropdown-content">
<a href="#">Atlanta</a>
<a href="#">Bowling Green</a>
<a href="#">Charleston</a>
<a href="#">Chattanooga</a>
<a href="#">Jackson</a>
<a href="#">Memphis</a>
<a href="#">Miami</a>
<a href="#">Nashville</a>
<a href="#">Panama</a>
<a href="#">Sarasota</a>
<a href="#">Savannah</a>
<a href="#">Tallahassee</a>
<a href="#">WPB</a>
</div>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">West</a>
<div class="dropdown-content">
<a href="#">California</a>
<a href="#">Colorado</a>
<a href="#">New Mexico</a>
<a href="#">Utah</a>
<a href="#">Washington</a>
</div>
</li>
</ul>
</body>
</html>
創建jsfiddle/codepen或在您的文章中啓用片段功能，同時使用CTRL + M進行編輯，以便我們可以看到我們正在處理的內容。 – ProEvilz
將UL封裝在DIV中，並將大部分樣式從UL移至DIV。從技術上講，它是你想要穿過屏幕的背景顏色。 –
建議你拿@Nawed Khan說的 - 把你的UL包裝在一個容器元素中，並用display：block/margin; 0自動把戲。示例小提琴：https：//jsfiddle.net/deftehsafc/tsv9ddtr/ – defteH