HTML文本格式

Question

希望这是一个非常简单的问题。我试图在不使用表格的情况下实现以下格式化，如第一张图片所示。有没有办法使用span和/或div标签设置文本内容的样式，使其看起来像底部的示例？非常感谢您的见解。

使用表格

期望的外观

更新

谢谢大家的建议，我不确定在这种情况下是否使用表是标准的。

Answer 1

如果你不介意有一个固定宽度的左列，试试这个：

Live Demo

<强> HTML：

<dl>
    <dt>Instructions</dt>
    <dd>ABC, 123<br />ABC, 123<br /></dd>
    <dt>Example</dt>
    <dd>ABC, 123<br />ABC, 123<br /></dd>
</dl>

Floats are cleared.

<强> CSS：

dl {
   overflow: hidden
}
dt, dd {
    float: left;
    width: 100px
}
dt {
    clear: both;
    text-align: right;
    padding: 0 9px 0 0
}

虽然不是：

  

使用span和/或div标签

我相信我选择的标签在这里更具语义意义。

Answer 2

在CSS中：

table
{
    border; 0;
}

如果这不起作用，那么您的HTML中可能有边框设置：

<table border="1">

或类似的东西，删除声明并使用如上所述的CSS：）

Answer 3

准备好一些Div汤？

http://jsfiddle.net/loktar/WSqRR/5/

<强>标记

<div id="wrapper">
    <div class='left'>
        Instructions:
    </div>
    <div class='right'>
        <p>ABC,123</p>
        <p>ABC,123</p>
    </div>
    <br class='clear'/>
    <div class='left'>
        Im so long thats right LONG:
    </div>
    <div class='right'>
        <p>ABC,123</p>
        <p>ABC,123</p>
    </div>
</div>

<强> CSS

#wrapper{width:auto;}
.left,.right{float:left;text-align:right; width:50%;}
.right{float: right; text-align:left;}
.clear{clear:both;}

Answer 4

definition/description list可能适合您的目的。这是一个example of how styling it might work。

HTML：

<dl class="in">
    <dt>Instructions</dt>
    <dd>ABC, 123<br>ABC, 123</dd>
</dl>
<dl class="ex">
    <dt>Examples</dt>
    <dd>ABC, 123<br>ABC, 123</dd>
</dl>

CSS：

dl { clear:both; margin:0 0 1em; }
dl dt { color:#666; width:7em; float:left; margin:0 1em 0 0; text-align:right; }
dl dd { margin:0 0 0 8em; }

Answer 5

HTML：

<p class="title">Instructions:</p>
<p>ABC,123</p>
<p>ABC,123</p>
<p class="title">Examples:</p>
<p>ABC,123</p>
<p>ABC,123</p>

CSS：

p
{
    margin-left: 210px;
}
.title
{
    margin: 0;
    width: 200px;
    text-align:right;
    float:left;
}

虽然我不得不说，如上面的答案所述，它看起来有点像表格数据。在这种情况下使用表格是可以的。

编辑：http://jsfiddle.net/TZpXd/