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

您的结构建议 table 行为，例如：

<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/

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

为此使用 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 5

为什么浮动不是个好主意？试试这个：

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/

如何使用 css 设置样式？

How to style this with css?

html

css

web