Question

我无法弄清楚如何使用20px的填充将文本字段拉伸到其父div的大小？

HTML

 <div id="new-post-background"> 
  <h2 class="form-title">Create a Listing</h2>
  <div class="container">
    <h2 class="field-title">Item Title</h2>
    <%= f.text_field :title, :class => 'text-field from-control'%>
   </div>
</div>

CSS

#new-post-background {
  background-color: #F2F2F2;
  min-height: 600px;
  margin: 20px;
  padding: 20px;
  position: relative;
  display: block;
}

.form-title {
  text-align: center;
  padding-top: 20px;
  margin: auto;
}

.field-title {
  padding-top: 10px;
  padding-right: 10px;
  font-size: 14px;
  font-variant: small-caps;
  text-shadow: 0 0 1px rgba(0,0,0,0.3);
}

.text-field {
  font-size: 20px;
  display: block;
  width: inherit;
}

我正在使用Bootstrap作为前端，你可以看到使用Rails渲染的元素。

非常感谢任何帮助！

Answer 1

父div为container，因此：

.container { padding: 20px; }
.text-field { width: 100%; }

或者如果你只是想让输入而不是字段标题有填充，那么添加一个额外的容器div：

CSS：

.field-container { padding: 20px; }
.text-field { width: 100%; }

HTML：

<div class="container">
  <h2 class="field-title">Item Title</h2>
  <div class="field-container">
    <%= f.text_field :title, :class => 'text-field from-control'%>
  </div>
</div>

如果你使用bootstrap，那么html是不同的，所以你应该参考documentation。

如何使用填充将文本字段拉伸到父div的宽度？

1 个答案: