Question

我想在下面制作标签列表我想使用CSS而不是使用Table标签我怎么能这样做？

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

Answer 1

使用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

Answer 2

你可以这样做：

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/

Answer 3

对于这样的事情，我建议使用定义列表。你可以在这里阅读一篇很棒的文章：http://css-tricks.com/utilizing-the-underused-but-semantically-awesome-definition-list/

之后，使用css和定位元素应该很容易，就像在你的例子中一样

如何编写CSS以使表格像？

3 个答案: