我该如何编写CSS来使表格像？

我想使标签列表如下所示。
我想用CSS代替使用Table标签。
我该怎么做？我该如何编写CSS来使表格像？

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

来源

2013-01-09 cat

不，使用表格，这是表格数据。 – Kyle

如果我使用表，它会扰乱对齐:(我使用引导，所以我不想打扰其他表的常规表的CSS。 – cat

它看起来不像一张表，它看起来像一个带有标题的列表。 – Quentin

你可以这样说：

HTML：

<div class="left"> 
    Tags: 
</div> 
<div class="right"> 
    Apple Banana Melon Strawberry Kiwi Orange 
    Pineapple Carrot Onion Tomato Bacon 
    Sandwitch SoyBeans Pork Beef Chicken 
</div>

CSS：

.left, .right 
{ 
color:#2B91AF; 
} 

.left 
{ 
    float: left; 
    width: 30px; //adjust this width according to your needs 
    margin-right: 10px; //adjust this margin according to your needs 
} 

.right 
{ 
    float: left; 
    width: 400px; //adjust this width according to your needs 
}

这里是一个小提琴只是因为它的漂亮： http://jsfiddle.net/VQjGW/

来源

2013-01-09 09:48:02 Ivozor

使用display:table-cell

HTML

<div class="table"> 
    <div class="td">tags</div> 
    <div class="td">Apple Banana Melon Strawberry Kiwi Orange Pineapple Carrot Onion Tomato Bacon Sandwitch SoyBeans Pork Beef Chicken </div> 
</div>

CSS

.table{display:table-row; width:350px; } 
.td:first-child{width:10px; } 
.td{display:table-cell; padding:10px; width:320px}

LIVE DEMO

来源

2013-01-09 09:43:02 Sowmya

对于像这样的事情，我会建议使用Definitio列表。您可以在这里阅读关于此的一篇精彩文章：http://css-tricks.com/utilizing-the-underused-but-semantically-awesome-definition-list/

之后，应该很容易地使用css并定位元素，如示例。

来源

2013-01-09 09:56:58

如果你只有一个项目在列表中，它不是一个列表很多DL是一个可怕的过度使用的元素IMO。 – Quentin

它可能是一个语义问题。我冒昧地再次阅读DL，并认为确实可能有更好的选择。在这个例子中，DT将是标签：标签，DD将是一个标签。我的错误是，在这个例子中，DD不一定是DT的定义。我可以考虑使用DL的更好的情况，例如字典中的条目。 –

我该如何编写CSS来使表格像？

回答

相关问题