Question

我有一张带有输入的卡片，并且有一些文字包裹在它的右边。当文本很长时，它会包含在复选框

下

Codepen：http://codepen.io/padmacnu/pen/bpKOVB

＆＃13;

div {
  font: 12px arial;
  width: 250px;
  height: 50px;
  background: gray;
  border: 1px solid #111111;
}

＆＃13;

<div>
    <input type="checkbox">
    <span>text is too long and wraps under the checkbox</span>
</div>

＆＃13;

Answer 1

您可以浮动输入并使span块成为块格式化上下文。

div {
  font: 12px arial;
  width: 250px;
  height: 50px;
  background: gray;
  border: 1px solid #111111;
}
input {
  float: left;
}
span {
  display: block;
  overflow: hidden; /* Establish BFC */
}

<div>
  <input type="checkbox">
  <span>text is too long and wraps under the checkbox text is too long and wraps under the checkbox</span>
</div>

或者，您可以使用flexbox：

div {
  font: 12px arial;
  width: 250px;
  height: 50px;
  background: gray;
  border: 1px solid #111111;
  display: flex;
}
span {
  flex: 1; /* Fill remaining space left by the input */
}

<div>
  <input type="checkbox">
  <span>text is too long and wraps under the checkbox text is too long and wraps under the checkbox</span>
</div>

Answer 2

你可以这样做：http://codepen.io/dirtysmith/pen/QNxzGM

div {
  font: 12px arial;

  width: 250px;
  height: 50px;
  background: gray;
  border: 1px solid #111111;
}
input{
    width:20px;

    position:relative;
    left: 0px; 

    vertical-align:middle; 
}

span{  
    width:200px;       

    position:relative;
    left: 0px;

    display:inline-block;    
    vertical-align:middle; 
}

Answer 3

float：左侧输入工作
Flex也像魅力一样工作

＆＃13;

div {
  font: 12px arial;
  width: 250px;
  height: 50px;
  background: gray;
  border: 1px solid #111111;
}
input {
  float: left;
}

＆＃13;

<div>
  <input type="checkbox">
  <span>text is too long and wraps under the checkbox</span>
</div>

＆＃13;

http://codepen.io/padmacnu/pen/bpKOVB

防止文本在输入字段下包装

3 个答案: