3

Key-Valueペアが1行にあると想定される定義リストがあります。定義は用語の直後から始まるため、<dt>sの幅は固定されていません。これは実際にはフローティング要素を使用して正常に機能し、次のようになります。

値：定義1

値：定義2

値：定義3

問題は、<dd>-elementが長くなる可能性があり、その結果、次のようになることです。

値：定義1

価値：

定義2は非常に長いです。

値：定義3

しかし、私はこれを実際に取得したいと思います：

値：定義1

値：定義2

非常に長いです。

値：定義3

頭が回らない。多分誰かがアイデアを持っています。

これがjsfiddle.netのデモで、ソースは次のとおりです。

HTML

<dl>
    <dt>Value 1:</dt>
    <dd>Defintiion 1</dd>
    
    <dt>V 2:</dt>
    <dd>Defintiion 2</dd>
    
    <dt>Value 3</dt>
    <dd>Defintiion 3 is pretty long. So it breaks into a new line.</dd>
    
    <dt>This length is not defined:</dt>
    <dd>Defintiion 4</dd>
    
    <dt>Last</dt>
    <dd>Defintiion 5</dd>
</dl>​

CSS

dl {
    width: 200px;
    border: 1px solid red;
}

dl > dt {
    display: block;
    float: left;
    clear: both;
    margin: 0;
    padding: 0 5px 0 0;
    font-weight: bold;
}

dl > dd {
    display: block;
    float: left;
    margin: 0;
    padding: 0;
}​
4

2 に答える 2

2

display: inline探しているものを達成するために使用できます：

http://jsfiddle.net/unPdd/

于 2012-10-20T14:05:34.967 に答える