3

「.tag」div の幅を、その中のテキストと同じだけにしたいと思います。しかし、何らかの理由で、段落要素が親要素の幅全体にまたがっています。どうすればこれを防ぐことができますか? 「.tag」の div は、その中のテキストと同じ幅になるようにするには?

JSFIDDLE: http://jsfiddle.net/X77e7/

私のHTML：

<div class="tag">
    <p> Hiking </p>
</div>

私のCSS：

.tag {
    margin: 0px 10px 0px 0px;
    padding: 5px 5px 5px 5px;
    height: auto;
    width: auto;
    border: 1px solid #ddd;
    border-radius: 4px 4px 4px 4px;
    background-color: #f4f4f4;
}
.tag p {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #444;
}
4

3 に答える 3

4

追加display:inline-block

div はデフォルトでスペース全体を占めるブロック要素であるため、現在ストレッチ中です。

.tag {
    margin: 0px 10px 0px 0px;
    padding: 5px 5px 5px 5px;
    height: auto;
    width: auto;
    border: 1px solid #ddd;
    border-radius: 4px 4px 4px 4px;
    background-color: #f4f4f4; display:inline-block
}

デモ

于 2013-03-06T07:27:05.667 に答える
0

divとはどちらpもblock要素です。したがって、displayatの設定を検討する必要がありますinline。

.tag {
    display: inline;
    margin: 0px 10px 0px 0px;
    padding: 5px 5px 5px 5px;
    height: auto;
    width: auto;
    border: 1px solid #ddd;
    border-radius: 4px 4px 4px 4px;
    background-color: #f4f4f4;
}

.tag p {
    display: inline;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #444;
}

http://jsfiddle.net/X77e7/2/

于 2013-03-06T07:28:04.803 に答える
0

floatあなたとあなたの問題だけ.tagが解決されます

.tag {
    float:left;
    margin: 0px 10px 0px 0px;
    padding: 5px 5px 5px 5px;
    height: auto;
    width: auto;
    border: 1px solid #ddd;
    border-radius: 4px 4px 4px 4px;
    background-color: #f4f4f4;
}

デモ

于 2013-03-06T08:26:16.980 に答える