2014-04-07 2 views
0

ul 및 li 코드를 보면 내 사이트 맵에 대한 질문이 있습니다. 하지만 모든 UL은 다른 것보다 아래에 있으며 나는 그것이 나란히 있기를 원합니다. 새로운 UL이 나란히 있습니다. 어떻게해야합니까? 첫 아이와 일하는거야?바닥 글 : Sitemap side by side

사이트 맵

       <ul> 
            <li>Opleiding</li> 
             <ul> 
              <li>Visie & Beleid</li> 
              <li>Opbouw Studieprogramma</li> 
              <li>Competenties</li> 
              <li>Diploma</li> 
              <li>Beroepen</li> 
             </ul> 

            <li>Onderwijsprogramma</li> 
             <ul> 
              <li>Mededelingen</li> 
              <li>Uitagenda</li> 
              <li>Propedeuse</li> 
              <li>Verdieping 1</li> 
              <li>Verdieping 2</li> 
              <li>Afstuderen</li> 
             </ul> 

            <li>Organisatie</li> 
             <ul> 
              <li>Contact</li> 
              <li>Blog</li> 
              <li>Docenten</li> 
              <li>Onderwijsbureau</li> 
              <li>Stagebureau</li> 
              <li>Buitenlandbureau</li> 
              <li>Examencommissie</li> 
              <li>Decaan</li> 
             </ul> 

            <li>Stages en Projecten</li> 
             <ul> 
              <li>Stages</li> 
              <li>Projecten</li> 
             </ul> 
           </ul> 

(사이트 맵 내 안에)이 내 CSS

footer{ 
width: 100%; 
position: absolute; 
top: 317%; 
left: -10%; 
background: lightgrey; 
margin:10%; 
padding: 2%; 
} 

답변

1

시도 디스플레이 인라인 블록 또는 당신은 나란히하고자하는 UL의 왼쪽 및 float입니다.

<ul> 
           <li>Opleiding</li> 
            <ul class="sitemap"> 
             <li>Visie & Beleid</li> 
             <li>Opbouw Studieprogramma</li> 
             <li>Competenties</li> 
             <li>Diploma</li> 
             <li>Beroepen</li> 
            </ul> 

           <li>Onderwijsprogramma</li> 
            <ul class="sitemap"> 
             <li>Mededelingen</li> 
             <li>Uitagenda</li> 
             <li>Propedeuse</li> 
             <li>Verdieping 1</li> 
             <li>Verdieping 2</li> 
             <li>Afstuderen</li> 
            </ul> 

           <li>Organisatie</li> 
            <ul class="sitemap"> 
             <li>Contact</li> 
             <li>Blog</li> 
             <li>Docenten</li> 
             <li>Onderwijsbureau</li> 
             <li>Stagebureau</li> 
             <li>Buitenlandbureau</li> 
             <li>Examencommissie</li> 
             <li>Decaan</li> 
            </ul> 

           <li>Stages en Projecten</li> 
            <ul class="sitemap"> 
             <li>Stages</li> 
             <li>Projecten</li> 
            </ul> 
          </ul> 

CSS : : 우선 마크 업이 invald이

footer .sitemap { 
display: inline-block; 
OR 
float: left; 
} 
+0

나는 것 : 다른 UL의 내부에 중첩 적 UL하려는 경우가 LI 거기에서

<ul> <li>Title <ul> <li>Sub-Title</li> </ul> </li> </ul> 

의 내부에 있어야합니다, 당신은 아마 같은 뭔가가 필요 인라인 블록을 사용하되, 플로팅하기로 결정했다면 플로트를 지우십시오. – Manly

+0

답변 주셔서 감사하지만 주요 것은 내가 div 또는 클래스를 사용하지 않고 그것을하고 싶어? 어떤 제안? –

+0

클래스없이이 작업을 수행하려면 위의 CSS를 ul 요소에 적용해야하지만 클래스가 없어도이를 수행하지 않는 것이 좋습니다. 이는 사이트의 모든 ul 요소에 해당 스타일을 적용하기 때문입니다. – Manly

0

글쎄 나는 클래스를 추가하는 스타일링 쉽게

HTML을하는 것이 좋습니다.

footer > ul > li { 
    float:left; 
    width:50%; 
} 

http://jsfiddle.net/fTCY5/

관련 문제