Question

我试图让输入字段拉伸可用屏幕宽度的宽度，使30px div保持在同一条线上。无法解决这个问题。

<div style="overflow:hidden;">
    <div style="float:left;">
        <input type="text" style="width:100%;">
    </div>
    <div style="float:right; width:30px; border:1px solid red;">
        @
    </div>
</div>

Answer 1

也可以发布一个人摆弄的东西......

<input type="text"><div>@</div>

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

input[type="text"] {
width: calc(100% - 30px);
}

div {
width: 30px;
float: right;
border: 1px solid red;
}

http://codepen.io/anon/pen/ZYNXYJ

Answer 2

您需要一个设置定位和宽度的外部容器。然后绝对位于其中。然后根据右边的位置和宽度设置右边的那个;根据双方的左边那个。

<div style="position:relative; width: 100%; height: 2em;">
  <div style="position: absolute; right: 0; width: 30px; top: 0; bottom: 0;">...</div>
  <div style="position: absolute; left: 0; right: 30px; top: 0; bottom: 0;">...</div>
</div>

Answer 3

一种方法是使用CSS calc()：

html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}
html, body {
    width:100%;
    margin:0;
}
#parent {
    overflow:hidden;
    width:100%;
}
#parent>div:first-child {
    float:left;
    width: calc(100% - 30px);
}
#parent>div:first-child>input {
    width:100%;
}
#parent>div:first-child+div {
    float:right;
    width:30px;
    border:1px solid red;
}

<div id="parent">
    <div>
        <input type="text" />
    </div>
    <div>@</div>
</div>

另一种方法是使用display:table/table-cell：

html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}
html, body {
    width:100%;
    margin:0;
}
#parent{
    display:table;
    table-layout: fixed;
    width: 100%;
}
#parent>div{
    display:table-cell;
}
#parent>div:first-child{
    width:100%;
}
#parent>div:first-child+div{
    width:30px;        
}
#parent>div:first-child>input{
    width:100%;
}

<div id="parent">
    <div>
        <input type="text" />
    </div>
    <div>@</div>
</div>

Answer 4

您可以只浮动@符号，并为input容器设置相等的边距。

＆＃13;

.input-group {
  overflow: hidden;
}
.input-group .input {
  margin-right: 30px
}
.input-group input {
  box-sizing: border-box;
  display: block;
  width: 100%;
}
.icon {
  float: right;
  width: 30px;
  text-align: center;
}

＆＃13;

<div class="input-group">
  <div class="icon">@</div>
  <div class="input">
    <input type="text">
  </div>
</div>

＆＃13;

Answer 5

如果一个div是屏幕宽度的100％，你怎么想象另一个div在同一条线上拟合？唯一有意义的是将它们设置为百分比等于100％。

<div style='width:90%;'>
   <input type="text" style="width:100%;">
</div>
<div style='width:10%;'>@</div>

获得100％的divs＆amp;输入以水平显示

5 个答案: