如何用css设计这个样式？

Question

想知道用css设计样式的最佳方法是什么？我知道float可以实现它，但我认为这不是一个好主意。

Love  Love is a variety of different feelings, 
      states, and attitudes that ranges from
      interpersonal affection to pleasure.

Day   A day is a unit of time. In common
      usage, it is an interval equal to 24 
      hours.

<li>
    <span>Love</span>
    <span>Love is a variety of different feelings, states, and attitudes that ranges from interpersonal affection to pleasure.</span>
</li>
<li>
    <span>Day</span>
    <span>A day is a unit of time. In common usage, it is an interval equal to 24 hours.</span>
</li>

Answer 1

使用dl，dt和dd代码

<dl>            
    <dt>Name: </dt>
    <dd>John Don</dd>

    <dt>Age: </dt>
    <dd>23</dd>

    <dt>Gender: </dt>
    <dd>Male</dd>

    <dt>Day of Birth:</dt>
    <dd>12th May 1986</dd>
</dl>

<强> CSS

dl {
    margin-bottom:50px;
}

dl dt {

    color:#000;
    float:left; 
    font-weight:bold; 
    margin-right:10px; 
    padding:5px;  
    width:100px; 
}

dl dd {
    margin:2px 0; 
    padding:5px 0;
}

以下是输出：http://jsfiddle.net/jemz2q5m/5/

Answer 2

使用wonderous display:table-* options：

li {
    display:table-row;
}
li > span {
    display:table-cell;
    padding:3px;
}

As seen on jsfiddle

并且给出了这个：

Answer 3

这就是你想要的吗？

的CSS：

ul {
    margin:0;
    padding:0;
    list-style:none;
}
ul > li:nth-child(odd) {
    background-color:#ccc
}

ul > li div { display:table; }
ul > li div span { display:table-cell; }
ul > li div span.one { width:100px; }

查看jsFiddle

http://jsfiddle.net/r31a4p3d/

Answer 4

为什么漂浮是一个坏主意？试试这个：

li {
    clear:both;
    list-style-type:none;
}

li span:first-child {
    float:left;
    padding:0 20px 20px 0;
    display:block;
    min-width:30px;
}

http://jsfiddle.net/mz46oyee/

Answer 5

您的结构建议表格行为如下：

<table>
  <tbody>
      <tr>
        <th>Love</th>
        <td>Love is a variety of different feelings, states, and attitudes that ranges from interpersonal affection to pleasure.</td>
      </tr>
      <tr>
        <th>Day</th>
        <td>A day is a unit of time. In common usage, it is an interval equal to 24 hours</td>
      </tr>
    </tbody>
  </table>

http://jsfiddle.net/Pik_at/4dohxmn8/