css


【css】border-bottomがコンテンツをうまく囲ってくれない場合の対処法

border-bottomがコンテンツをうまく囲ってくれず、期待した箇所よりも上に来て、コンテンツ内容に重なって表示される場合の対処法。

次の記述を追加。

----------------------
overflow:auto
----------------------

divの間にfloat:leftなどを使っていると起きる現象である。
floatは文字通り浮いてしまうので、floatした要素しかない持たない親要素は、空っぽの状態になり高さも0pxになってしまう。

ちなみにこの現象は IE11 では起きず、Opera では起こった。

参考ページ1
参考ページ2

cssのborderはきちんと指定しないと効かないことがある

cssのborderはきちんと指定しないと効かないことがある

枠線を消すために、

border:0px;

と記述したが一部のブラウザでうまくいかなかった。

そこで、

border:0px #969696 solid;

と三項目きちんと指定したらうまくいった。
手抜きをするとろくなことがない。

border-width:0px;

↑これでもいいだろう

リストを横一列に並べた後に、右寄せ

text-align:right;が効かず左よせになる。

答え 次のように変更する。

<div style="text-align:right;">
<ul>
<li style="float:left;">リスト</li>
<li style="float:left;">リスト</li>
<li style="float:left;">リスト</li>
</ul>
</div>

  ↓↓↓

<ul style="float:right;">
<li style="float:left;">リスト1</li>
<li style="float:left;">リスト2</li>
<li style="float:left;">リスト4</li>
</ul>

スタイルシートの二つ以上のクラスを同時に適用する方法

スタイルシートの二つ以上のクラスを同時に適用するには、次のような感じに記述する。

<div class="one two">

ようは、半角スペースを入れて続けてクラス名を入れれば良い。

3つならこんな感じ。 

 <div class="one two three">

margin-topが効かない件

margin-topが効かなかった。

どうも「マージンの相殺」が起こっているらしい。

マージンの相殺が起こる原因はいろいろあるが、自分のケースは、margin-topを使った<div>を含む親要素に float: left; が使われていたため。

floatを解除しないとmarginが有効にならないようだ。

解決方法として「clearfix」なるものがあるらしい。

ただ、私には理解できなかったため、とりあえずその場しのぎで次の方法でfloatを解除し、事なきを得た。

有効にならないmargin-topの<div>の前に

<div>テキスト</div>

を記述。

スタイルシートには、

 .clear {
 clear: both;
}

と記述。

ようは普通にfloatを解除しただけ。

いずれclearfixを使わなければいけないだろうが、そのときまでこれでいこう。

2 / 212