Question

我的一个UL无法正确显示。它既可以内联显示，也可以显示子弹。

我知道这个问题与我的选项卡界面使用的div完全隔离。我也假设这是由于上面的层次结构。（.tabs li说要显示“内联”内容。）如果我删除它，显然标签界面被搞砸了。如何让div保持水平显示，并将div框内的列表显示在一个块中？

谢谢！

CSS

    .basics ul {font-family:terminal;
         font-size:9px;
         text-transform:uppercase;
         color:gray;
         padding:0px;
         display:block;
         }


    li.basics { list-style-image: url('/bullet.png'); 
         }   

    ul b {font-family: terminal;
  font-size: 8px;
  text-transform:uppercase;
  color:#fff3a2;
  font-weight:lighter;
  }


    div.tabs {
            padding:15px;
            width:760px;
            background:#000;
            color:#fff;
            border-radius: 0em 4em 1em;
            -moz-border-radius: 10px;
            margin-left:3px;
            height:200px;
            overflow: auto;
}
    ul.tabs {
    padding:0;
    margin:0;
    margin-top:10px;
    margin-left:3px;
    }


        .tabs li {
            list-style:none;
            display:inline;
        }

和html代码：

    <ul class='tabs'>
<li><a href='#tab1'>BASICS</a></li>
<li><a href='#tab2'>BIOGRAPHY</a></li>
<li><a href='#tab3'>RANDOM</a></li>
<li><a href='#tab4'>NPCs</a></li>
  </ul>


   <div id="tab1" class="tabs">

<ul class="basics">
<li><b>Full Name:</b> 
<li><b>DOB:</b> 27 May 1985; 28 YRS </li> 
<li><b>Birthplace:</b>Olinda, Brasil</li> 
<li><b>Nationality:</b>Brazilian, French, & American</li>

</ul>

Answer 1

如果我正确理解你的问题，你希望顶部是水平的，而下面的是垂直的。我刚刚将您的规则从.tabs li更改为ul.tabs li

http://jsfiddle.net/itsmikem/3RwMn/

如果这是你的问题，请告诉我。

ul不显示子弹

1 个答案: