我如何编写CSS使表像？ [英] How can I code CSS to make Table like?

问题描述

我想使标签列表如下所示。

我想使用CSS而不是使用表标记。

我该如何做？

标签：苹果香蕉瓜草莓猕猴桃橙
菠萝胡萝卜洋葱番茄培根三明治
SoyBeans猪肉牛肉鸡

$

解决方案

HTML：

 < div class =left> 
标签：
< / div> 
< div class =right> 
苹果香蕉瓜草莓猕猴桃橙
菠萝萝卜洋葱番茄培根
 Sandwitch大豆猪肉牛肉鸡
< / div> 
  

CSS：

 code> .left，.right 
 {
 color：＃2B91AF; 
} 
 
 .left 
 {
 float：left; 
 width：30px; //根据你的需要调整这个宽度
 margin-right：10px; //根据你的需要调整这个保证金
} 
 
 .right 
 {
 float：left; 
 width：400px; //根据你的需要调整这个宽度
} 
  

nice：
http://jsfiddle.net/VQjGW/

I want to make the Tags list just like this below.
I want to use CSS instead of using Table tag.
How can I do this?

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

解决方案

You can do it like this:

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
}

Here is a fiddle just because it's nice: http://jsfiddle.net/VQjGW/

这篇关于我如何编写CSS使表像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！