0

私の問題は、 div クラスform-profileとform-profile-sideの場合、これらの div が 2 つ必要な場合は、それらが HTML 内の同じ行にある必要があることです。

<div class="span13">
  <form class="form-profile-side"></form><form class="form-profile"></form>
</div>

2番目のクラスを新しい行に配置すると、レイアウトが台無しになります(これが私がやろうとしていることです):

<div class="span13">
  <form class="form-profile-side"></form>
  <form class="form-profile"></form>
</div>

CSS:

.form-profile-side {
  display: inline-block;
  vertical-align: top;
  width: 120px;
  background-color: #fff;
  border: 1px solid #d6d6d6;
  border-right: 0;
  -webkit-border-radius: 0px 0px 0px 0px;
  -moz-border-radius: 0px 0px 0px 0px;
  border-radius: 0x 0px 0px 0px;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

.form-profile {
  display: inline-block;
  width: 817px;
  padding: 15px 15px 15px;
  background-color: #fff;
  border: 1px solid #d6d6d6;
  -webkit-border-radius: 0px 5px 5px 5px;
  -moz-border-radius: 0px 5px 5px 5px;
  border-radius: 0px 5px 5px 5px;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

すべてを 1 行にするのではなく、クラスを使用して HTML に新しい行を作成できるようにするにはどうすればよいですか?

JSFiddle: http://jsfiddle.net/VzTxM/4/

4

1 に答える 1

2

あなたが抱えている問題は（私が質問を正しく理解していれば）display:inline-block; HTML が 2 つの別々の行にある場合に、lil スペーサーを追加しています。代わりに、要素を浮動させることでこれを修正できますか?

CSS 

.form-profile-side,.form-profile {
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
    border: 1px solid #d6d6d6;
    background-color: #fff;
    float:left;
}
.form-profile-side {
  -webkit-border-radius: 0px 0px 0px 0px;
  -moz-border-radius: 0px 0px 0px 0px;
  border-radius: 0x 0px 0px 0px;
  vertical-align: top;
  border-right: 0;
  width: 120px;
}
.form-profile {
  -webkit-border-radius: 0px 5px 5px 5px;
  -moz-border-radius: 0px 5px 5px 5px;
  border-radius: 0px 5px 5px 5px;
  padding: 15px 15px 15px;
  width: 817px;
}

.clear {
    clear:both;
}

HTML

<div class="span13">
  <form class="form-profile-side"><br><br></form>
  <form class="form-profile"><br><br></form>
  <div class="clear"></div>
</div>
于 2013-02-13T15:12:52.190 に答える