Question

我想在DIV中创建一个表单，我希望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="&#x2713;" /><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>

并为其指定了“display：inline-block”属性，认为这样可以使表单尽可能大，而且不会更大。

#userNotificationForm {
  background-color: #fff;
  display: inline-block;
  text-align: left;
}

这适用于Mac Firefox - https://jsfiddle.net/yj3cdvfy/，但在Mac Chrome上注意文本框会在表单容器边缘（白色部分）流血。同样适用于Safari。如何让容器完全包含文本框，就像Firefox似乎一样？

Answer 1

您的CSS没有为表单指定任何显式宽度，也没有指定div和input元素。但HTML标记指定了输入元素的大小属性，这使得Chrome，Chromium和Internet Explorer 11计算的宽度大于父元素的宽度，因此输入字段将溢出到外部。

在输入[type = text]上指定宽度：100％（相对于其父元素），使其适合表单。

input[type=text] {
  width: 100%;
  /* ... */
}

这是一个适用于当前浏览器（Chrome 60，Firefox 55和Internet Explorer 11）的更新小提琴： https://jsfiddle.net/IngoSteinke/ju2qfz9w/1/

为什么Google Chrome不尊重我的显示：内联块属性？

1 个答案: