如果没有足够的空间显示整个关键字,如何在下一行开启关键字?

时间:2013-01-09 11:54:50

标签: html css css3

如果没有足够的空间显示整个关键字,如何在下一行开始关键字开始?
请检查我的代码。

我希望此输出:如果没有足够的空间显示整数,关键字应该从下一行开始。

Tags: Apple Banana Melon 
      Strawberry Kiwi Orange 
      Pineapple Carrot Onion 
      Tomato Bacon Sandwitch
      SoyBeans Pork Beef Chicken 

当前输出:关键字分为当前行和下一行的头部。

Tags: Apple Banana Melon Strawbe
      rry Kiwi Orange Pineapple 
      Carrot Onion Tomato Bacon 
      Sandwitch SoyBeans Pork Be
      ef Chicken 

当前HTML

<div class="shop_tag ">
    <table>
        <tr>
         <th class="tag_title">tags:</th>
         <th class="tag_tags">
          <ul>
                    <li>Apple</li>
                    <li>Banana</li>
                    <li>Melon</li>
                    <li>Strawberry</li>
                    <li>Kiwi</li>
                      ....
          </ul>
         </th>
        </tr>
    </table>
</div> 

当前CSS

div.shop_tag .table{
    display:table-row;
    display:inline;
}
div.shop_tag th.tag_title{
    width:100px;
    vertical-align: top;
}
div.shop_tag th.tag_tags{
    display:table-cell;
    vertical-align: top;
    text-align:left;
}  
div.shop_tag li{
display:inline;
}

更新:在Firefox的检查员中,这些类是继承的。

a:focus {
    outline: thin dotted rgb(51, 51, 51);
    outline-offset: -2px;
}

.css3 {
    font-size: 1.5em;
    color: rgb(112, 165, 255);
}

a {
    color: rgb(0, 136, 204);
}

li {
    line-height: 20px;
}

div.shop_tag th.tag_tags {
    text-align: left;
}

table {
    border-collapse: collapse;
    border-spacing: 0px;
}

0 个答案:

没有答案