0
과도한 네비게이션 바를 잃지 않고 네비게이션 센터를 센터링하려고합니다. 내 말은 내비게이션 막대를 전체 화면에 표시하고 싶지만 네비게이션 막대의 텍스트를 중앙에 배치해야한다는 것입니다. 나는 SS의 ul {}의 너비를 28 %로 변경하면 화면 중앙에 나타남을 발견했다. 하지만 나는 그것을 100 %로 유지하여 전체 상단에 navbar가 있습니다. 탐색 표시 줄에 텍스트를 가운데 놓을 수있는 방법은 무엇입니까? 다음 ul의 text-align: center 설정이 적용 될 것입니다 float: left;을 지우고 display: inline-block을 추가합니다 :센터링 UL NavBar
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
DIV에서 UL을 감싸고 대부분의 스타일을 UL에서 DIV로 옮깁니다. 기술적으로 화면을 가로 질러 가고 싶은 배경색입니다. –
당신은 @Nawed Khan이 말한 것을 취할 것을 권합니다. 컨테이너 요소에서 UL을 감싸고 디스플레이와 함께 사용하십시오 : block/margin; 0 자동 트릭. Example fiddle : https://jsfiddle.net/deftehsafc/tsv9ddtr/ – defteH