我有一個無序列表中的項目清單，需要放置在彼此相鄰塊...對齊列表項中的UL

我的小提琴：

HTML

<ul id="selected-plays"> 
    <li>Comedies</li> 
     <ul> 
      <li><a href="/asyoulikeit/">As You Like It</a></li> 
      <li>All's Well That Ends Well</li> 
      <li>A Midsummer Night's Dream</li> 
      <li>Twelfth Night</li> 
     </ul> 

    <li>Tragedies</li> 
     <ul> 
      <li><a href="hamlet.pdf">Hamlet</a></li> 
      <li>Macbeth</li> 
      <li>Romeo and Juliet</li> 
     </ul> 

    <li>Histories</li> 
     <ul> 
      <li>Henry IV (<a href="mailto:[email protected]">email</a>) 
      <ul> 
       <li>Part I</li> 
       <li>Part II</li> 
        </ul> 
       </li> 
       <li><a href="http://www.shakespeare.co.uk/henryv.htm">Henry V</a></li> 
       <li>Richard II</li> 
    </ul> 

</ul>

CSS

#selected-plays > li { 
    float:left; 
    list-style:none; 
    margin:10px; 
}

我需要將列表項相鄰放置..

來源

2014-01-21 user1050619

你的HTML標記是無效的，驗證它http://validator.w3.org/#validate_by_input –

不要關閉'li'有'ul'子菜單，直到'ul'關閉。 http://jsfiddle.net/Paulie_D/hZSz5/6/ –

您的HTML格式不正確。

JSFiddle updated

HTML

<ul id="selected-plays"> 
    <li>Comedies 
     <ul> 
      <li><a href="/asyoulikeit/">As You Like It</a></li> 
      <li>All's Well That Ends Well</li> 
      <li>A Midsummer Night's Dream</li> 
      <li>Twelfth Night</li> 
     </ul> 
    </li> 

    <li>Tragedies 
     <ul> 
      <li><a href="hamlet.pdf">Hamlet</a></li> 
      <li>Macbeth</li> 
      <li>Romeo and Juliet</li> 
     </ul> 
     </li>  
     <li>Histories 
     <ul> 
      <li>Henry IV 
       <ul> 
        <li>Part I</li> 
        <li>Part II</li> 
       </ul> 
      </li> 
      <li><a href="http://www.shakespeare.co.uk/henryv.htm">Henry V</a></li> 
      <li>Richard II</li> 
     </ul> 
    </li> 
</ul>

來源

2014-01-21 15:24:03

 <ul id="selected-plays"> 
      <li>Comedies 
      <ul> 
       <li><a href="/asyoulikeit/">As You Like It</a></li> 
       <li>All's Well That Ends Well</li> 
       <li>A Midsummer Night's Dream</li> 
       <li>Twelfth Night</li> 
      </ul> 
      </li> 
      <li>Tragedies 
      <ul> 
       <li><a href="hamlet.pdf">Hamlet</a></li> 
       <li>Macbeth</li> 
       <li>Romeo and Juliet</li> 
      </ul> 
      </li> 
      <li>Histories 
      <ul> 
       <li>Henry IV (<a href="mailto:[email protected]">email</a>) 
       <ul> 
        <li>Part I</li> 
        <li>Part II</li> 
       </ul> 
       </li> 
       <li><a href="http://www.shakespeare.co.uk/henryv.htm">Henry V</a></li> 
       <li>Richard II</li> 
      </ul> 
      </li> 
     </ul>

來源

2014-01-21 15:37:55 Rajnish

<ul id="selected-plays"> 
    <li>Comedies 
     <ul> 
      <li><a href="/asyoulikeit/">As You Like It</a> 
      </li> 
      <li>All's Well That Ends Well</li> 
      <li>A Midsummer Night's Dream</li> 
      <li>Twelfth Night</li> 
     </ul> 
    </li> 
    <li>Tragedies 
     <ul> 
      <li><a href="hamlet.pdf">Hamlet</a> 
      </li> 
      <li>Macbeth</li> 
      <li>Romeo and Juliet</li> 
     </ul> 
    </li> 
    <li>Histories 
     <ul> 
      <li><a href="mailto:[email protected]">Henry IV (email)</a> 
       <ul> 
        <li>Part I</li> 
        <li>Part II</li> 
       </ul> 
      </li> 
      <li><a href="http://www.shakespeare.co.uk/henryv.htm">Henry V</a> 
      </li> 
      <li>Richard II</li> 
     </ul> 
    </li> 
</ul>

For Block refer this Fiddle

對於CSS樣式您可以參考以下

<ul id="nav" class="sixteen columns"> 
    <li><a href="#">Comedies</a> 

     <ul> 
      <li><a href="/asyoulikeit/">As You Like It</a> 

      </li> 
      <li><a href="#">All's Well That Ends Well</a> 

      </li> 
      <li><a href="#">A Midsummer Night's Dream</a> 

      </li> 
      <li><a href="#">Twelfth Night</a> 

      </li> 
     </ul> 
     <li><a href="#">Tragedies</a> 

      <ul> 
       <li><a href="hamlet.pdf">Hamlet</a> 

       </li> 
       <li><a href="#">Macbeth</a> 

        <li><a href="#"> Romeo and Juliet</a> 

        </li> 
       </li> 
      </ul> 
      <li><a href="#">Histories</a> 

       <ul> 
        <li><a href="mailto:[email protected]">Henry IV (email)</a> 

         <ul> 
          <li>Part I</li> 
          <li>Part II</li> 
         </ul> 
        </li> 
        <li><a href="http://www.shakespeare.co.uk/henryv.htm">Henry V</a> 

        </li> 
        <li><a href="#">Richard II</a> 

        </li> 
       </ul> 
      </li> 
     </li> 
    </li> 
</ul>

CSS

#nav { 
    width:800px; 
    margin:30px 50px; 
    padding: 0; 
    float:left; 
} 
#nav li { 
    list-style: none; 
    float: left; 
    padding:0 10px; 
    background-color:#367FB3; 
    color:white; 
} 
#nav li a:hover { 
    background-color:#52baff; 
    color:#fff; 
} 
//daf adf 
/*--temp--*/ 
#nav ul ul li { 
    clear:left; 
} 
#nav ul ul { 
    position:absolute; 
    left:14em; 
    top:0; 
} 
#nav ul ul li a { 
    display:block; 
    padding: 3px 15px; 
    color: #242424; 
    text-decoration: none; 
    font-size:13px; 
    font-family:"Lato" !important; 
} 
/*--end temp--*/ 
#nav li a { 
    display: block; 
    padding: 3px 15px; 
    color: #242424; 
    text-decoration: none; 
    font-size:13px; 
    font-family:"Lato" !important; 
} 
#nav a:hover { 
    color:#367FB3; 
} 
#nav a:active { 
    color:#367FB3; 
} 
#nav li ul { 
    display: none; 
    width: 14em; 
    /* Width to help Opera out */ 
    background-color:transparent; 
    z-index:666; 
} 
#nav li:hover ul, #nav li.hover ul { 
    display: block; 
    position: absolute; 
    margin:0px -10px; 
    padding:0px; 
} 
#nav li:hover ul ul { 
    display:none; 
} 
#nav li ul li:hover ul { 
    display:block 
} 
#nav li:hover li, #nav li.hover li { 
    float: none; 
    line-height:30px; 
} 
#nav li:hover li a, #nav li.hover li a { 
    background-color:#367FB3; 
    color:#fff; 
    font-size:13px; 
    font-family:"Lato" !important; 
} 
#nav li li a:hover { 
    background-color:#52baff; 
    color:#fff; 
}

working fiddle

來源

2014-01-21 16:28:51

對齊列表項中的UL

回答

For Block refer this Fiddle

對於CSS樣式您可以參考以下

working fiddle

相關問題