0

私はここで髪を引っ張って、CSSにほんの一握りのhtml要素だけを配置させようとしています。

コードは次のとおりです：http： //jsfiddle.net/7pTL8/

「person@business.com[v]」を右上に配置し、その下に「平均深度」、「[x]設定」、「過去24時間[v]」をすべて表示したいのですが。同じレベルで一緒に。私はフロートを試しましたが、それは奇妙な結果をもたらしました。CSSについて読んだすべてのことから、レイアウトにテーブルを使用することは不十分な解決策であることが示唆されているため、ここでテーブルを使用することに頼りたくありません。

4

3 に答える 3

1

<span>要素はを使用しますdisplay:inlineが、<h1>要素はデフォルトで使用blockします。使用する＃graph-titleを手動でオーバーライドするdisplay:inlineと、残りの要素と整列します。

#graph-title
{
    display:inline;       
}
​
于 2012-06-19T14:50:27.567 に答える
1

あなたの問題はおそらくh1要素の使用です。デフォルトh1のスタイルはdisplay: blockです。スタイルを追加すればdisplay: inline問題ありません。

編集：span特別な理由がない場合は、それ を使用する必要があると思います。

于 2012-06-19T14:54:07.770 に答える
1

それはあなたが思うほどタフではありません..ここに小さな解決策があります..それはあまり良くありませんが、今のところあなたの問題を解決することができます..

[リンク] http://jsfiddle.net/7pTL8/2/

<div id="user-selection">person@business.com [v]</div>
<div id="settings-container">
 <h1 id="graph-title">Average Depth</h1>
<span id="settings-button">[x] Settings</span>
<span id="timeframe-dropdown">Past 24 hours [v]</span>
</div>

CSS

​#graph-title {
   position:absolute;
   left:1px;
   text-align: left;
}

#settings-container {
   text-align: right;
   }    

 #user-selection {
    text-align: right; 
  }

</ p>

于 2012-06-19T15:11:32.050 に答える