(New) 가로 목록 만들기

본질적으로 정렬되지 않은 목록 인 내 웹 사이트의 가로 메뉴를 만들지 묻는 메시지가 필요했습니다. 그러나 나는 그것의 "수직 상태"에서 그것을 꺼낼 수 없다.(New) 가로 목록 만들기

이것은 내 목록 자체에 대한 내 HTML 코드입니다.

<ul id="horizontaal"> 
     <li><a href="index.html">Index</a></li> 
     <li><a href="mijnsoftware.html">Mijn Software</a></li> 
     <li><a href="browsers.html">Browsers</a></li> 
     <li><a href="registratie.html">Registratie</a></li> 
    </ul>

CSS의 경우 다음과 같습니다. 특별한에서

ul li { 
    background-color: grey; 
    border: 5px solid #999999; 
    list-style-type: none; 
    margin-bottom: 5px; 
    margin-top: 5px; 
    text-align: center; 
    padding: 3px; 
    width: 10%; 
    float: left; 
    clear: both; 
    width:150px; 

} 
ul { 
    margin-bottom: 70%; 
    margin-right: 100px; 
    float: left; 

}

그리고이 수평 목록 는 :

#horizontaal { 
     width: 100%; 
    } 

#horizontaal li { 
    width: 10%; 
    margin-right: 0px; 
    margin-left: 0px; 
    float: left; 
    display: inline; 
}

이 목록 내 화면 폭의 약 100 %를 차지 필요가있다.

http://i.imgur.com/6HEsS8m.png

편집 :

나는 내 코드에서 많은 뻔뻔스러운 오류, 나는 그것을 위해 내가 게시하기 전에 좀 더 시간을 촬영했습니다해야 죄송 것을 가지고 통지하지 않았다; 진심으로 사과드립니다.

ul li { 
    background-color: grey; 
    border: 5px solid #999999; 
    list-style-type: none; 
    margin-bottom: 5px; 
    margin-top: 5px; 
    text-align: center; 
    padding: 3px; 
    width: 150px; 



} 
ul { 
    margin-bottom: 70%; 
    margin-right: 100px; 
    float: left; 

} 

#horizontaal { 
    width: 100%; 
} 

#horizontaal li { 
    width: 10%; 
    margin-right: 0px; 
    margin-left: 0px; 
    display: inline; 

}

내 목록에 이제 수평 정렬 것 같다,하지만 내 훈련 상태는 다음이 코드에 관해서는

내가 지금 가지고있는 것입니다. "목록 항목이 떠 확인 목록 자체가되지 않을 수 있습니다 흙손." 하지만 나는 인라인 디스플레이가 float과 결합 될 수 없다는 의견을 읽었습니다.

출처

2014-02-24 user3348262

플로트 : 나는

UL 리튬 {블록

디스플레이를} 사용하십시오 왼쪽 디스플레이 : 인라인 호환되지 않습니다. 어쨌든 요즘은 수레가 필요 없습니다. 제안 된대로 인라인 블록으로 가십시오. 그리고 좀 더 검색을해라, 이것은 백만 번 했어! – Pevara

첫 번째 CSS 규칙에서 너비를 두 번 설정합니다. 왜? 그런 다음 당신은 부유하고 깨끗합니다. 왜? – j08691

이 CSS 코드를 사용하면 메뉴를 가로로 만들 수 있습니다.

ul{list-style-type:none;} 
ul li{display:inline-block; background-color:#ef8913; padding:5px;} 
ul li a{ color:blue} 

<ul> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
    <li>Item 5</li> 
    </ul>

다음은 작동 링크입니다. http://jsbin.com/kunavupa/1/edit

출처

2014-02-24 20:07:40

솔루션을 제공된 코드에 적용해야합니다. 완전히 다른 것은 아닙니다 –

시도해보십시오. jsfiddle

당신이 한 일에 유일한 문제는 모든 ul과 li에 float: left이 있었고 문제가 해결되었습니다.

출처

2014-02-24 20:21:48 PixelAcorn

표시 속성을 설정해야합니다. 표시를위한 다른 가능한 옵션은 다음과 같습니다 (인라인 블록, 블록 .. 등).

출처

2014-02-24 20:23:29 rivtracks

(New) 가로 목록 만들기

답변

관련 문제