3

幅が 50% の 2 つのインライン ブロック div があります。両方とも、幅が 140px のボタンが 2 つあります。

私の期待は、要素の幅が両方とも等しいため、同時にサイズも変更する必要があるということでした。ここで何が起こるかというと、含まれている div が十分に小さくなり、4 つのボタンが収まらなくなり、2 つの div がサイズ変更されますが、それらが均等にサイズ変更される前に、1 つの div が小さくなります。jsfiddle で最もよく説明されています。ブラウザー ウィンドウのサイズをゆっくりと変更すると、一方の div が他方よりも先にサイズ変更されます。

http://jsfiddle.net/dominicm/pcYhL/2/

HTML の空白はコメントで削除され、マージンとパディングはすべて 0 に設定されます。

何が原因で、どのように修正すればよいでしょうか? jsfiddle に示されているレイアウトを実現する方法に関する他の提案はありますか?

jsfiddle が後で利用できない場合の参照用のコードを次に示します。

HTML:

<div class="menu">
  <div id="d">
      <input class="delete" type="submit" value="Delete Selected"><input class="collapse" type="button" value="Collapse All">
  </div><!--
  --><div id="p">
      <input class="expand" name="expand" type="button" value="Expand All">
  <input class="update" type="submit" value="Update Selected">
      </div>
</div>

CSS:

.menu{
    width:100%;
    height:80px;
    border-radius:7px;
    background-color:#666;
    text-align:center;
    margin:0;
    padding:0;
}
#d{
    width:50%;
    display:inline-block;
    background-color:red;
    margin:0;
    padding:0;
}
#p{
    width:50%;
    display:inline-block;
    background-color:green;
    margin:0;
    padding:0;
}

.delete{
    margin:0;
    padding:0;
    width:140px;
}
.update{
    margin:0;
    padding:0;
    width:140px;
}
.collapse{
    margin:0;
    padding:0;
    width:140px;
}
.expand{
    margin:0;
    padding:0;
    width:140px;
}
4

3 に答える 3

1

2 番目の div のボタン間にはまだ空白があります。

  <input class="expand" name="expand" type="button" value="Expand All">
 <input class="update" type="submit" value="Update Selected">

それらを同じ行に置くと、うまくいくはずです。

http://jsfiddle.net/pcYhL/13/

于 2013-01-29T16:37:21.007 に答える
1

一方が他方より先に折りたたまれていた理由は、HTML フォーマットの違いによるものでした。

緑色のボックスでは両方のボタンがインライン (改行なし) で、赤いボックスでは改行で区切られています。私が言及している違いは次のとおりです。

JSFiddle を表示: http://jsfiddle.net/pcYhL/14/

これらのボタンは、改行またはスペースで区切られていません。

<div id="d">
     <input class="delete" type="submit" value="Delete Selected"><input class="collapse" type="button" value="Collapse All">
</div>

でもこいつらは…

<div id="p">
     <input class="expand" name="expand" type="button" value="Expand All">
     <input class="update" type="submit" value="Update Selected">
</div>

2番目のものをこれに変更すると：

<div id="p">
     <input class="expand" name="expand" type="button" value="Expand All"><input class="update" type="submit" value="Update Selected">
</div>

それらがまったく同時に崩壊することに気付くでしょう。

于 2013-01-29T16:37:30.430 に答える
0

問題が何であるかについて 100% 明確であるとは確信していません。しかし、これで問題は解決するはずです。min-width:140px;コンテナに追加します。

#d{
    width:50%;
    min-width:140px;
    display:inline-block;
    background-color:red;
    margin:0;
    padding:0;
}
#p{
    width:50%;
    min-width:140px;
    display:inline-block;
    background-color:green;
    margin:0;
    padding:0;
}

http://jsfiddle.net/pcYhL/6/

コンテナーのサイズ変更に合わせてボタンのサイズも変更されることが予想される場合は、ボタンの幅にパーセンテージを使用する必要があります。

.delete{
    margin:0;
    padding:0;
    width:70%;
}
.update{
    margin:0;
    padding:0;
    width:70%;
}
.collapse{
    margin:0;
    padding:0;
    width:70%;
}
.expand{
    margin:0;
    padding:0;
    width:70%;
}

http://jsfiddle.net/pcYhL/10/

于 2013-01-29T16:26:11.330 に答える