list menu 요소를 나란히 배치하십시오.

정렬되지 않은 목록 요소를 탐색 메뉴 모음에서 서로 옆에 나란히 놓으려고합니다.list menu 요소를 나란히 배치하십시오.

문제 :

~~나는 "인라인"으로 표시를 설정하지만 어떤 변화를하지 않는 것 같다.~~
내비게이션 막대 (.nav in css)가 너비 공간의 100 %를 차지하지 않고 너비를 100 %로 지정하여이 문제를 해결하려고 시도했지만 탐색 바 양쪽에 간격이 있습니다.
마지막으로, 창을 전체 화면으로 전환하면 배경 이미지가 확장되어 탐색 표시 줄 (.nav)의 위치가 변경됩니다. 창이 더 커지면 배경이 확대되는 것을 막을 수있는 방법이 있습니까? nav 막대의 위치에 영향을 미치지 않습니다.

다음은 내 시도입니다. 내가 잘못한 곳이면 누구나 볼 수 있습니까? 매우 감사.

HTML :

<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
</head> 
<body> 
    <div class="nav"> 
     <h1 class="logo">LogoHere</h1> 
      <ul class="nav-menu"> 
       <li>Action</li> 
       <li>Who we are?</li> 
       <li>Blog</li> 
       <li>Services</li> 
       <li>Get in touch</li> 
      </ul> 
    </div> 
</body> 
</html>

CSS :

.nav{ 
    background-color: #2EC0FE; 
    opacity: 0.75; 
    -moz-box-shadow: 0px 0px 0px rgba(0,0,0,1), inset 0px 0px 0px rgba(0,0,0,1); 
    -webkit-box-shadow: 0px 0px 0px rgba(0,0,0,1), inset 0px 0px 0px rgba(0,0,0,1); 
    box-shadow: 0px 0px 0px rgba(0,0,0,1), inset 0px 0px 0px rgba(0,0,0,1); 
    background-image: -o-linear-gradient(90deg , rgb(0,0,0) 0%, rgb(0,0,0) 100%); 
    background-image: -moz-linear-gradient(90deg , rgb(0,0,0) 0%, rgb(0,0,0) 100%); 
    background-image: -webkit-linear-gradient(90deg , rgb(0,0,0) 0%, rgb(0,0,0) 100%); 
    background-image: -ms-linear-gradient(90deg , rgb(0,0,0) 0%, rgb(0,0,0) 100%); 
    background-image: linear-gradient(90deg , rgb(0,0,0) 0%, rgb(0,0,0) 100%); 
    height: 100px; 
    width: 100%; 
    margin-top: 600px; 
} 

.logo{ 
    font-family: times, Times New Roman, times-roman, georgia, serif; 
    font-size: 54px; 
    line-height: 40px; 
    letter-spacing: -5px; 
    color: white; 
    margin: 0 0 0 0; 
    padding-top: 25px; 
    padding-left: 25px; 
    font-weight: 100; 
} 

.nav-menu 
{ 
    list-style-type: none; 
    display: inline; 
    text-align: center; 
    font-size: 20px; 
    color: white; 
    padding: 0px; 
    margin-top: 0px; 
}

이미지 문제 3 : 윈도우가 스크린 전체가 아니고,이 내 탐색 모음을 배치 할 내가 원하는 방식으로 때 이것은 enter image description here

다음은 전체 화면으로 표시되며 배경 이미지가 확대되어 표시되지 않는 것을 볼 수 있습니다. w 탐색 막대 위치가 훨씬 높아서 첫 번째 이미지에 표시되도록하십시오. enter image description here

출처

2013-09-07 Umz15

'.nav-menu' 대신'.nav-menu li'에'display : inline'을 추가해보십시오. – Harry

@Harry는 완벽했습니다.하지만 이제는 모두 LogoHere 아래에 나타납니다 (이미지 참조). 그 옆에 같은 줄에있는 것이 좋을 것입니다. – Umz15

'h1' 요소는 기본적으로'block' 요소입니다. 그러므로'display : inline-block;'을'.logo'에 추가해야합니다. 이것 [피들] (http://jsfiddle.net/cV8ZL/)을 확인하십시오. 이 예제에서 다른 좋은 효과를 피했습니다. 모든 문제가 해결되면, 나는 그것들을 하나의 대답으로 통합 할 것입니다. – Harry

첫 번째 항목 :

이 display: inline;.nav-menu li 대신 .nav-menu에 추가합니다.
h1 (기타 제목 태그)은 기본적으로 block 요소입니다. 메뉴와 동일한 행에 표시하려면 display: inline-block;을 logo에 추가하십시오.

두 번째 항목은 기본적으로

body 마진이있다. 따라서 nav 바를 전체 공간으로 사용하려면 body {margin: 0;}을 CSS에 추가해야합니다.

셋째 항목 :

는 .nav 클래스에 position: absolute; bottom: 0px;를 추가합니다. 그러면 막대가 하단에 놓입니다.

Working Demo 위의 세 항목을 모두 포함합니다.

출처

2013-09-07 15:18:16 Harry

고맙다. Harry, that fixed 내 처음 두 문제. Fiddler는 세 번째 문제를 잘 설명하지 못하여 문제를 설명하기 위해 몇 가지 이미지를 추가했습니다. 한번 봐주세요. 어떤 질문이라도 알려주세요. – Umz15

@ Umz15 : 이제 알겠습니다. 'position : absolute;를 추가해보십시오. bottom : 0px;'를'.nav' 클래스에 추가합니다. 그것은 그것을 해결해야합니다. [피들] (http://jsfiddle.net/cV8ZL/3/) – Harry

맨, 정말 고마워요. 당신은 내 모든 문제를 해결했습니다. 며칠 동안 그것에 붙어있어. 정말 고맙습니다.]]. 추가 정보 나 도움이 될 수있는 사이트가 있습니까? – Umz15

list menu 요소를 나란히 배치하십시오.

답변

관련 문제