4

私はテーブルを持っています:

ここに画像の説明を入力

右の TD を見てください。

黄色の div には高さが必要です (必須)。checkbox+を垂直方向に揃える必要がありますSPAN

だから私はそれらの両方を : として置き、 でfloat:left遊んだmargin-top。

しかし、ブラウザの幅を減らすと、SPANダウンします:

ここに画像の説明を入力

私はすでにノーラップを入れています。

テキスト (td#2) が折り返されることは気にしません。 check-box+spanが常に一緒であることが必要です。ここは英語ですが、多言語サイトであるため、ラッパー div
では使用できません。そのため、テキストを元の長さに合わせる必要があります。widthYes

両方の要素がラップされないようにするにはどうすればよいですか?

ここにjsbinがあります。ここにあります

td{
  border:solid 1px green;
}

.myCheck{
  float:left;
  margin-top:16px;
}


.mySpan{
  float:left;
  margin-top:12px;
}
<table style='width:100%;' cellspacing=0 cellpadding=0>
  <tr>
    <td>
      1
    </td>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing tempor incididunt ut labore et 
    </td>
    <td style='white-space:nowrap;'>
      <div style='white-space:nowrap; height:50px;background-color:yellow;float:left;'>
        <input type='checkbox' class='myCheck' />
        <span  class='mySpan'>Yes</span>
      </div>
    </td>

  </tr>
</table>

ここに問題があります：

ここに画像の説明を入力

Firefox ではラップしますが、Chrome ではラップしません (これが本来あるべき方法です)。

4

4 に答える 4

4

これを試してください：http://jsbin.com/oquniq/26/edit

<td style='white-space:nowrap;'>
  <label>
    <input type='checkbox' />
    <span class='mySpan'>
      Yes
    </span>
  </label>
</td>

position:relativeテキストの垂直方向の配置を調整するために使用します

.mySpan
{
  position:relative;
  top:-2px;
}
于 2013-02-17T17:17:05.463 に答える
2

ルールの名前はではありnowrapませんno-wrap。

于 2013-02-17T16:16:05.890 に答える
0

The breaking onto a new line is casued by the elements being individually floated left.

Put the checkbox within the <span> (or better would be a <label> element) and this will fix it. Also it is not required to float the element - you can just make it display: block;.

<label  class='mySpan'>
    <input type='checkbox' class='myCheck' />
    Yes
</label>

Remove .myCheck styling and set the .mySpan CSS to be:

.mySpan{
    display: block;
    margin-top: 12px;
}
于 2013-02-17T16:35:13.043 に答える
0

I suggest you put a table in that td, so it won' t wrap 

<td style='white-space:no-wrap;'>

<table style='white-space:no-wrap;height:50px;background-color:yellow;'>

          <tr>
            <td> <label  class='mySpan'>Yes</label></td>
            <td><input type='checkbox' class='myCheck' /></td>

          </tr>
<table>

</td>

P.S : HTML is semantic , so for a label, use the label element, that's better for the world :)

于 2013-02-17T16:35:48.337 に答える