中に2つのボタンを追加したいエリアがあります。左側のボタンは「Sunday」、右側のボタンは「misc」です。私が欲しいのは、2つのボタンを均等に配置することです。2つのボタンのサイズが同じなので、同じクラスを割り当てます。コード：
<div id="switcher">
<div class="button" id="Sunday">Sunday</div>
<div class="button" id="mic">mic</div>
なので、当然日曜日は左側だと思いました。左のパディングなど、2つのボタンを分離するルールを追加したいのですが...結果は右側に「Sunday」が表示されます。なんで？jsfiddleで私のCSSを参照してください。
ありがとう。
ボタンは にposition設定されていabsoluteます。これを .button クラスと id (#Sunday と #mic) から取り出します。
さらに、ボタンのマージンとパディングを取り除き、インラインの代わりに display:inline-block を使用することをお勧めします。インライン要素で幅や高さを指定することはできません。また、ブロック要素は通常、追加の調整なしでは同じ水平線上にレンダリングできません。
スイッチャーの幅を 456 ピクセルにする必要がある場合は、ボタンを幅 228 ピクセル (その 1/2) に設定できます。ボタン div 間の html の改行は、ボタン間にスペースを追加するため、最初の div の直後に 2 番目の div を配置する必要があります。
これは、あなたがやろうとしていたことのより管理しやすいバージョンです。http://jsfiddle.net/ftQD5/19/
編集: ボタン/テキストを垂直方向に配置する場合は、最初にボタンを に設定してからposition:relativeに設定しtop:<vertical offset>pxます。これにより、ボタンが下に移動します。次に、ボタンを追加padding-topして、テキストを垂直方向の中央に表示することができます。新しい例はここで見ることができます: http://jsfiddle.net/ftQD5/20/
編集 #2: 周囲の div でテキストを垂直方向に中央に配置する簡単な方法はline-height、div の高さと同じにすることです。これにより、テキストが自動的に中央揃えになります。padding-topまた、ボタン div の高さに影響しないため、よりも操作が簡単になります。最後に更新されたフィドル: http://jsfiddle.net/ftQD5/26/
あなたのCSSに関しては、position:absoluteon.buttonと.micがうまくいっていません。これらのインスタンスの両方を取り除くと、多かれ少なかれ期待どおりの結果が得られます (左側に日曜日、右側にマイク、左側にパディングが目立つマイクなど)。
これは、ボタン クラスの margin-left が 120 であるにもかかわらず、mic id の margin-left 属性を 0 にリセットしたためです。
あなたが望むことを行う編集クリーナーフィドル： http://jsfiddle.net/ftQD5/13/