0

最初のラベルの幅と上部のパディングを維持しながら、2 番目のラベルと入力を最初のラベルと同じ行に配置するにはどうすればよいですか?

以下のコードまたはここに jsfiddle バージョンがありますhttp://jsfiddle.net/kpBNB/2

<div>
  <li id="input1">
    <label>From</label>
    <select>
      <option value="1">1 am</option>
    </select>
  </li>

  <li id="input2">
    <label> until</label>
    <select>
      <option value="1">1 am</option>
    </select>
  </li>
</div>

div {
  width: 100%;
   background-color: #ccc;
}

li {
  padding-top: 6px;
}

label {
  width: 15%;
  float: left;
  display: block;
  text-align: right;
}
4

2 に答える 2

1

の幅を取得するには、に幅labelを追加する必要がありますli（幅は親要素によって決定されるため）。したがって、このようなもの（フィドルを参照）：

ul {
  width: 100%;
  background-color: #ccc;
}

li {
  width: 30%;   /*this needs width*/
  padding-top: 6px;
  display: inline-block;
}

label {
  width: 50%; /* since my li was 30% width of ul, 
                 50% of that is back to your original 15% width */
  float: left;
  display: block;
  text-align: right;
}
于 2012-04-28T01:55:50.817 に答える
1

まず、 で<div>ある必要があります (またはの外側<ul>に緩い要素を含めることはできません)。<li><ul><ol>

次に、CSS に与えるdisplay: inline-block;とliうまくいくはずです。

編集：ねえ、あなたのjsfiddleはすでにそれを行っています、そしてそれはうまくいきます！

于 2012-04-28T01:17:13.910 に答える