链接到输入的右侧，输入占用CSS的全部剩余宽度？

这是一个非常基本的问题，但我认为投入行为奇怪，所以即时通讯努力寻找解决方案。链接到输入的右侧，输入占用CSS的全部剩余宽度？

我有一个液体宽度布局。我需要一个链接来坐在输入端。我需要输入占用所有可用的宽度：

<a href="#">Information Link</a> 
<input type="number" class="form-control form-control-default-new" placeholder="400">

enter image description here

如果输入的是一个div我也只是浮在链接的权利，并没有做任何事情。但是，如果我使输入显示块不会占用全宽。如果我将其宽度设置为100％，那么它将占用整条线，并且链接不再位于它的旁边。

来源

2015-01-15 Evans

你必须包装在一个div该输入的选项？ – RGLSV 2015-01-15 17:41:16

如果需要，那么是的 – Evans 2015-01-15 17:41:30

是这样的你想要的东西？ HTTP：//的jsfiddle。net/q8hk7fa8/ – dippas 2015-01-15 17:43:07

如果你可以包装在一个div容器输入，就可以达到这样的效果很简单：

float right为a标签
overflow: hidden到的input
的div container设置inputwidth to 100%
完成。

退房的demo here

a{ 
 
    float: right; 
 
} 
 
div{ 
 
    overflow: hidden; 
 
    padding-right: 20px; 
 
} 
 
input{ 
 
    box-sizing: border-box; 
 
    width: 100%; 
 
}

<a href="#">Information Link</a> 
 
<div><input type="number" class="form-control form-control-default-new" placeholder="400"/></div>

来源

2015-01-15 17:49:17 RGLSV

只需添加'input {box-sizing：border-box; }'修复输入的填充不受限于父div。 – Marcelo 2015-01-15 17:55:19

@Marcelo补充说。你可以利用边缘和填充来玩弄这个技巧，而不用担心有人会掉下去:) – RGLSV 2015-01-15 18:04:05

例与display: block和float: left：

* { 
 
    box-sizing: border-box; 
 
} 
 

 
a, input { 
 
    display: block; 
 
    float: left; 
 
} 
 

 
a { 
 
    text-align: center; 
 
    width: 20% 
 
} 
 

 
input { 
 
    width: 80% 
 
}

<input type="number" class="form-control form-control-default-new" placeholder="400"> 
 
<a href="#">Information Link</a>

来源

2015-01-15 17:45:10 sodawillow

您可以尝试使用display: table和display: table-cell。第一个单元格中的white-space: nowrap CSS可以防止第二个单元（带有链接）断开，并且width: 100%会使该单元格的长度与表格允许的一样大（即直到单元格运行到具有nowrap限制的第二个单元格中。

JSFIDDLE DEMO

CSS：

* { 
    box-sizing: border-box; 
} 
input { 
    width: 100%; 
} 
.container { 
    width: 100%; 
    display: table; 
} 
.container div { 
    display: table-cell; 
    white-space: nowrap; 
} 
.link { 
    text-align: right; 
    padding-left: 10px; 
} 
.input-box { 
    width: 100%; 
}

HTML：

<div class="container"> 
    <div> 
     <input type="number" class="form-control form-control-default-new" placeholder="400" /> 
    </div> 
    <div class="link"> 
     <a href="#">Information Link</a> 
    </div> 
</div>

来源

2015-01-15 17:56:07 JRulle

我会设置输入字段所需的宽度，这样http://codepen.io/anon/pen/PwpBoK

.wrapper { 
    width: 100%; 
    height: 120px; 
    background: #ccc; 
    padding: 12px; 
} 
.text { 
    margin: 0 auto; 
    width: 600px; 

} 
.container { 
    background: #fff; 
    margin: 0 auto; 
    width: 600px; 
    height: 45px; 
    padding: 10px; 
} 

input { 
    width: 400px; 
    margin-right: 8px; 
} 

.form-control form-control-default-new { 
    width: 400px; 

} 


<div class="wrapper"> 
    <div class="text"> 
    <p>I need this:</p> 
    </div> 
<div class="container"> 

<input type="number" class="form-control form-control-default-new" placeholder="400"><a href="#">Information Link</a> 

</div> 
</div>

来源

2015-01-15 18:13:42 Denise

链接到输入的右侧，输入占用CSS的全部剩余宽度？

回答

相关问题