水平CSS - 按钮的输入字段100％和边距 [英] Horizontal CSS - Input Field 100% and Margin for button

问题描述

任务：使文本框宽度为100％，但允许有足够的空间用于按钮。

出现在下一行，文本框超出其容器的宽度。

 < div class =field> 
< input type =textname =my-field/> 
< input type =buttonid =my-buttonvalue =Add +/> 
< / div> 
 
 .field {
 margin-right：-70px; 
 width：100％; 
} 
 .field input [type = text] {
 display：block; 
 float：left; 
 margin-right：70px; 
} 
 .field输入[type = button] {
 display：block; 
 float：right; 
} 
  

我的主要布局使用以下技巧实现固定边栏的灵活宽度，由于某种原因，这不是上面的工作。

 < div class =outer-wrap> 
< div class =content> 
 ... 
< / div> 
< div class =sidebar> 
 ... 
< / div> 
< / div> 
 
 .outer-wrap {
 margin-right：-300px; 
 width：100％; 
} 
 .content {
 float：left; 
 margin-right：300px; 
} 
 .sidebar {
 float：right; 
} 
  

我在这里犯了什么错误？

查看： http://jsfiddle.net/thirtydot/25bZC/

CSS ：

  .field> span {
 display：block; 
 overflow：hidden; 
 padding-right：10px 
} 
 .field输入[type = text] {
 width：100％
} 
 .field输入[type = button] {
 float：right 
} 
  
 
 
 
  / strong> 
 < div class =field> 
< input type =buttonid =my-buttonvalue =Add +/> 
< span>< input type =textname =my-field/>< / span> 
< / div> 
  
 
Task: Make text box 100% width but allow enough room for button.


Problem: Button appears on next line and text box exceeds width of its container.
<div class="field">
    <input type="text" name="my-field" />
    <input type="button" id="my-button" value="Add +" />
</div>

 .field {
     margin-right: -70px;
     width: 100%;
 }
 .field input[type=text] {
     display: block;
     float: left;
     margin-right: 70px;
 }
 .field input[type=button] {
     display: block;
     float: right;
 }
My primary layout uses the following trick to achieve flexible width with fixed sidebar, but for some reason this is not working on the above.
<div class="outer-wrap">
    <div class="content">
        ...
    </div>
    <div class="sidebar">
        ...
    </div>
 </div>

 .outer-wrap {
     margin-right: -300px;
     width: 100%;
 }
 .content {
     float: left;
     margin-right: 300px;
 }
 .sidebar {
     float: right;
 }
What mistake am I making here?
解决方案
You have to screw with the HTML a bit, but otherwise this works perfectly in IE7+ and all modern browsers.

See: http://jsfiddle.net/thirtydot/25bZC/

CSS:
.field > span {
    display: block;
    overflow: hidden;
    padding-right: 10px
}
.field input[type=text] {
    width: 100%
}
.field input[type=button] {
    float: right
}
HTML:
<div class="field">
    <input type="button" id="my-button" value="Add +" />
    <span><input type="text" name="my-field" /></span>
</div>


                        
这篇关于水平CSS  - 按钮的输入字段100％和边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！