液体布局和边框
我遇到液体布局和边框问题,导致元素溢出。
- 这是一个 jfiddle 的例子 无边框页面(有效) 很好): http://jsfiddle.net/eRaB5/1/
- 现在这是一个示例我想 发生,但它破裂了。 http://jsfiddle.net/eRaB5/2/
结构有点像这样:
<div id="container">
<label>Label</label><input type="text' />
</div>
#container{width: 100%;}
label{width: 25%;}
input{width: 75;}
我需要值相加为 100%,以便左右边缘对齐。只有输入上的边框才能有效地设置输入宽度 width: 100% +2px;
仅使用 CSS 有什么方法可以解决此问题吗?
I am having problems with a liquid layout and borders, causing elements to overflow.
- Here is a jfiddle with the exmaple of
the page with no borders (works
fine): http://jsfiddle.net/eRaB5/1/ - Now here is an example of what I want
to happen, but it breaks.
http://jsfiddle.net/eRaB5/2/
The structure is somewhat like this:
<div id="container">
<label>Label</label><input type="text' />
</div>
#container{width: 100%;}
label{width: 25%;}
input{width: 75;}
I need the values to add up to 100% so the left and right edges align. Only the borders on the input make the input widths effectively width: 100% +2px;
Is there any way around this problem using just CSS?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
负边距
您可以尝试设置负边距:
我已经在您的 jsFiddle 上更改了它们,并且文本框确实跳转到了标签右侧。
Negative margins
You can try by setting negative margins:
I've changed them on your jsFiddle and textboxes did jump right of label.
已修复:
http://jsfiddle.net/Mutant_Tractor/eRaB5/3/
只需添加
to
.input-text
class.Fixed:
http://jsfiddle.net/Mutant_Tractor/eRaB5/3/
Just add
to
.input-text
class.