5

持っているボタンのラベルを作りたいです。私の問題は、ラベルがボタンよりも広いことです。私は現在、次のようにしています（簡単な例）：

<div class="parent_container_the_icon">
    <div class="label">
        This is the label text
    </div>
<div>

CSS:

.parent_container_the_icon {
    height: 50px;
    width: 50px;
    float: left;
}

.label {
    display: block;
    position: absolute;
    white-space: nowrap;
}

私が欲しいのは、ラベルがテキストを折り返さずにラベルテキスト自体の幅を取ることです。現時点ではテキストは折り返されていませんが、ラベル ボックスはコンテナの最大幅しか使用しないため、ラベル ボックスのテキストがオーバーフローします。

divラベルを強制的にテキストのサイズに合わせ、親の幅を継承しないようにするにはどうすればよいですか?

4

3 に答える 3

2

HTML:

 <div class="parent_container_the_icon">
      <div class="label">
           This it the label text
      </div>
 <div>​

CSS:

.parent_container_the_icon {
    height: 50px;
    min-width: 50px; /*<== changed width to min-width*/
    float: left;
}

.label {
    /*removed position:absolute*/
    display: block;
    white-space:nowrap;
}
于 2012-09-07T07:59:32.157 に答える
2

あなたはまさにあなたが望んでいたものを持っていたと思います。おそらく、別のブラウザでチェックインしますか？
これはあなたのコードです: jsfiddle

于 2012-09-07T08:10:57.087 に答える
0

white-space: nowrap;親クラスとwidth: 100%;子クラスでプロパティを使用できます。

これが役に立つことを願っています。

于 2014-05-05T10:49:09.517 に答える