0

我的一个 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>
4

1 回答 1

3

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

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

让我知道这是否是您的问题。

于 2013-10-13T02:21:30.180 回答