For Block refer this Fiddle

Question

我有无序列表中的项目列表，需要将它们放在彼此相邻的块中...

我的小提琴：

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:henryiv@king.co.uk">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;
}

我需要将列表项放在彼此旁边..

Answer 1

您的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>

Answer 2

        <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:henryiv@king.co.uk">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>

Answer 3

<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:henryiv@king.co.uk">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:henryiv@king.co.uk">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;
}

在ul中的块中对齐列表项

3 个答案:

For Block refer this Fiddle

对于Css样式您可以参考下面的

working fiddle