0

http://jsfiddle.net/Lijo/LLq3v/1/に示すようなHTMLがあります

次の2つのdivコンテンツを1行に入れる必要があります。

Tax Report 1
: Frequency - Weekly

インライン表示をしていますが、2列になっています。ここで欠けている点は何ですか？

4

6 に答える 6

3

このフィドルアップデートをお試しください

.reportTitle
{
    font:bold 10pt Arial;
    float:left;
}

.reportFrequency
{
    font:normal 10pt Arial;
    float:left;
}
于 2012-08-03T11:44:11.460 に答える
3

コンテナをdivinlineにすると、希望する効果が得られません。これにより、コンテナ自体がインライン要素として機能します。http： //www.tizag.com/cssT/inline.phpを参照してください。

必要な効果を作成する最良の方法は、内側のdivを左にフロートさせることです。それらがコンテナよりも狭い場合、それらは互いに隣り合って座ります。

divの作成inlineは通常、Web開発では眉をひそめますが、以下にコメントするように例外があります。これは、同様のトピックに関する投稿からのものです

<!-- An inline div is a freak of the web & should be beaten until it becomes a span 
(at least 9 times out of 10)... -->

<span>foo</span>
<span>bar</span>
<span>baz</span>
<!-- ...answers the original question... -->

ここで見つかりました。スパンが存在するのには理由があります。

divの左側をフロートするには、CSSを次のように変更します。

.reportTitle
{
    font:bold 10pt Arial;
    float: left;
}

.reportFrequency
{
    font:normal 10pt Arial;
    float:left;
}

ただし、divをspanに置き換えることをお勧めします。

于 2012-08-03T11:53:35.183 に答える
2

display: inline-block幅や高さを設定する機能を維持する必要がある場合にも使用できます。ああ、そして私は素敵な下線を引いた。

http://jsfiddle.net/4yqJ8/

.reportTitle {
    display:inline-block;
}

.reportFrequency {
    display: inline-block;
}
于 2012-08-03T12:38:20.043 に答える
2

コンテナをインライン要素にしましたが、内部要素はブロック要素のままであるため、上下に表示されます。代わりに、内側の要素をインラインにします。

デモ： http： //jsfiddle.net/LLq3v/5/

于 2012-08-03T11:45:50.880 に答える
1

.reportTitleおよび.reportFrequencyには、divの代わりにspanを使用します。http://jsfiddle.net/LLq3v/7/

何かをインライン要素のように動作させたい場合は、それをdivとしてコーディングするのではなく、代わりにインライン要素を使用する必要があります。MDNのインライン要素。cssを使用してすべての作業を実行できるのは事実ですが、そのようにしない理由があります

  1. あなたは自分の人生を不必要に難しくしています
  2. あなたはhtmlをより意味のないものにしている、すなわち：それ自体で解釈するのは完全な苦痛である。

また、親コンテナが狭すぎる場合でも、常に1行にとどまるようにしたい場合は、値、空白：nowrapを指定できます。

于 2012-08-03T12:03:39.087 に答える
1

コンテナ要素ではなく、display:inline表示したい要素に設定する必要があります。inline

あなたの場合、それはと.reportTitleですが、コンテナ要素である、ではあり.reportFrequencyません。.repeaterIdentifier

.reportTitle
{
    font:bold 10pt Arial;
    display: inline; /* HERE */
}

.reportFrequency
{
    font:normal 10pt Arial;
    display: inline; /* HERE */
}
.repeaterIdentifier
{
    border-bottom:1px solid #A7A7A6;
    margin: 0 0 5px 0;
    display: inline /* This can be removed */
}

ライブデモ：jsFiddle

于 2012-08-03T12:08:07.460 に答える