0
저는 HTML & CSS 코딩에 익숙하며 내비게이션 막대에서 항목의 가운데 맞추기에 문제가 있습니다. 항목을 가운데 맞추기 위해 여러 가지를 시도했지만 해결책을 찾을 수 없습니다. 나는 그것을 제거 할 때 모든 항목이 왼쪽으로 이동하기 때문에 CSS (아래 코드)에 .l-triangle-bottom과 .l-triangle-top의 border-style: solid;과 관련이 있다고 생각합니다.탐색 모음 항목을 가운데에 배치하는 방법은 무엇입니까?
누군가 나를 도울 수 있습니까?
여기 내 코드와 몇 가지 설명이 있습니다.
HTML
<div id="navigation_container">
<div class="l-triangle-top"></div>
<div class="l-triangle-bottom"></div>
<div class="rectangle">
<ul id="navigation">
<li class="active"><a href="#">✭ Home</a></li>
<li><a href="#">Location</a></li>
<li><a href="#">Location</a></li>
<li><a href="#">Our History</a></li>
<li><a href="#">Gifts</a></li>
<li><a href="#">Promotion</a></li>
<li><a href="#">Gallery</a></li>
</ul>
</div>
<div class="r-triangle-top"></div>
<div class="r-triangle-bottom"></div>
</div>
CSS
나는 페이지 상단 중앙 엔 고정 된 위치와 주요 컨테이너를 가지고있다.
#navigation_container {
position: fixed;
width: 1000px;
height: 200px;
top: 10%;
left: 50%;
margin-top: -100px;
margin-left: -500px;
}
그런 다음 주 컨테이너에 rectang이 있습니다. 항목이 있습니다.
.rectangle {
background: #e5592e;
height: 62px;
position: relative;
-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
z-index: 500;
margin: 3em 0;
text-align: center;
}
그리고 이것들이 항목입니다.
#navigation li {
list-style: none;
display: block;
float: left;
margin: 0.1em 0.8em;
}
#navigation li a {
text-shadow: 0 2px 1px rgba(0,0,0,0.5);
display: block;
text-decoration: none;
color: #f0f0f0;
font-size: 1.6em;
line-height: 60px;
}
#navigation li.active a:hover, #navigation li a:hover {
margin-top: 2px;
color: aqua;
}
그리고 테이프의 효과를 내기 위해 사각형의 각 사이트에 삼각형이 있습니다.
.rectangle { text-align: center; }
을하지만, 당신이 항목을 부동하여 해당 스타일을 재정의 왼쪽이 코드 :
.l-triangle-top {
border-color: #d9542b transparent transparent;
border-style: solid;
border-width:50px;
height:0px;
width:0px;
position: relative;
float: left;
top: 52px;
left: -50px;
}
.l-triangle-bottom {
border-color: transparent transparent #d9542b;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: relative;
float: left;
top: 10px;
left: -150px;
}
.r-triangle-top {
border-color: #d9542b transparent transparent;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: relative;
float: right;
right: -45px;
top: -107px;
}
.r-triangle-bottom {
border-color: transparent transparent #d9542b;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: relative;
float: right;
top: -149px;
right: -145px;
}