[英]Why is Google Chrome not respecting my display:inline-block property?
I want to create a form in a DIV and I would like the DIV to be no bigger than the elements in the form. 我想在DIV中创建一个表单,我希望DIV不要比表单中的元素大。 So I have crafted this as my DIV
所以我把它当作我的DIV
<div id="content">
<div id="userNotificationForm">
<form class="new_user_notification" id="new_user_notification" action="/user_notifications" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓" /><input type="hidden" name="authenticity_token" value="nZlQSEjw1o/7DxxOAUmFWJiXr5ZqPodX2tBcCs2qshqLVhM8U/WXuBWocICXDmYOoBnAjhvrEIat972+SkQKEQ==" />
<div class="field">
<label for="user_notification_price">Label</label> <span class="required">*</span> <br>
<input size="30" type="text" name="user_notification[price]" id="user_notification_price" />
</div>
<div class="actions buttonContainer">
<input type="submit" name="commit" value="Submit" id="submit" class="button btn" data-disable-with="Submit" />
</div>
</form>
</div>
</div>
and assigned it the "display:inline-block" property, thinking that would make the form as big as needed, and no bigger. 并为其指定了“display:inline-block”属性,认为这样可以使表单尽可能大,而且不会更大。
#userNotificationForm {
background-color: #fff;
display: inline-block;
text-align: left;
}
This works fine on Mac Firefox -- https://jsfiddle.net/yj3cdvfy/ , but notice on Mac Chrome the text box bleeds over the edge of the form container (the white section). 这在Mac Firefox上工作正常 - https://jsfiddle.net/yj3cdvfy/ ,但在Mac Chrome上注意文本框在表单容器的边缘(白色部分)流血。 Ditto for Safari.
同样适用于Safari。 How do I make the container include the textbox completely, as Firefox seems to do?
如何让容器完全包含文本框,就像Firefox似乎一样?
Your CSS does not specify any explicit width, neither for the form, nor for the div and input element. 您的CSS既没有为表单指定任何显式宽度,也没有指定div和input元素。 But the HTML markup specifies a size attribute for the input element which makes Chrome, Chromium and Internet Explorer 11 compute a width larger than the parent element's widht, so that the input field will overflow outside.
但HTML标记指定了输入元素的大小属性,这使得Chrome,Chromium和Internet Explorer 11计算的宽度大于父元素的宽度,因此输入字段将溢出到外部。
Specify a width: 100% (relative to its parent element) on input[type=text] to make it fit the form. 在input [type = text]上指定宽度:100%(相对于其父元素)以使其适合表单。
input[type=text] {
width: 100%;
/* ... */
}
Here is an updated fiddle that works in the current browsers (Chrome 60, Firefox 55, and Internet Explorer 11): https://jsfiddle.net/IngoSteinke/ju2qfz9w/1/ 这是一个适用于当前浏览器(Chrome 60,Firefox 55和Internet Explorer 11)的更新小提琴: https : //jsfiddle.net/IngoSteinke/ju2qfz9w/1/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.