在 CSS 中使 div 背景小于 100% 宽度？答案

【问题标题】：Making div background less than 100% width in CSS?在 CSS 中使 div 背景小于 100% 宽度？
【发布时间】：2017-12-17 01:46:37
【问题描述】：

我有简单的联系表格，但我希望它有一些背景知识。但是，简单地输入background-color 并不能如我所愿。背景颜色是页面的整个宽度，但我只希望它覆盖联系表单周围的一小块区域。我已经按照我希望它的样子放了一张图片。 HTML：

<div class="contact">
    <form action="/action_page.php">
        <input type="text" id="fname" name="firstname" placeholder="Your name"><br>
        <input type="text" id="lname" name="lastname" placeholder="Your last name"><br>
        <textarea rows="10" placeholder="Type Message"></textarea><br>
        <input type="submit">
    </form>
</div>

CSS

    .contact {
    text-align: center;
    background-color: #E0E0E0;
}

input[type=text] {
    width: 20%; 
    padding: 6[enter image description here][1]px; 
    border: 1px solid #ccc; 
    border-radius: 4px; 
    box-sizing: border-box; 
    margin-top: 6px; 
    margin-bottom: 16px; 
}

textarea {
    width: 45%; 
    padding: 6px; 
    border: 1px solid #ccc; 
    border-radius: 4px; 
    box-sizing: border-box; 
    margin-top: 6px; 
    margin-bottom: 16px; 
}

input[type=submit] {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

input[type=submit]:hover {
    background-color: #45a049;
}

【问题讨论】：

顾名思义，background-color 是元素（整个）背景的颜色。
您可以将宽度设置为95% 或50%。
@James Douglas，我先尝试过。它有点作用，但随后表单不再居中，并且与表单的大小混淆。
@JonathonHooks 查看我的回答here。

标签： html css background-color contact-form

【解决方案1】：

为联系人样式添加宽度属性，如：

    .contact{
    width: 80%;
    }

这将减小宽度。更改值以适合您的设计。

如果你想使 div 居中，请使用以下边距：

.contact {
width: 80%;
margin : 0 auto;
text-align: center;
background-color: #E0E0E0;
}

【讨论】：

【解决方案2】：

例如，您可以将宽度设置为80%，如下所示：

width: 80%;

然后使用margin: 0 auto; 将其居中，您就完成了！

.contact {
  text-align: center;
  background-color: #E0E0E0;
  width: 80%;
  margin: 0 auto;
}

input[type=text] {
  width: 20%;
  padding: 6[enter image description here][1]px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
}

textarea {
  width: 45%;
  padding: 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
}

input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

<div class="contact">
  <form action="/action_page.php">
    <input type="text" id="fname" name="firstname" placeholder="Your name"><br>
    <input type="text" id="lname" name="lastname" placeholder="Your last name"><br>
    <textarea rows="10" placeholder="Type Message"></textarea><br>
    <input type="submit">
  </form>
</div>

【讨论】：

【解决方案3】：

你可以这样做：

form{
  background-color: #E0E0E0;
  width:50%;   /* Put the width you want here */
  margin:auto;
}

【讨论】：

【解决方案4】：

将所有内容放入容器中并添加一些边距怎么样？

HTML

<div class="container">
  <div class="contact">
      <form action="/action_page.php">
          ...
      </form>
  </div>
</div>

CSS

.contact {
    text-align: center;
    background-color: #E0E0E0;
    margin: 0px 50px 20px 50px;
}

然后你可以使用container css 来适应上下文。

【讨论】：

我很高兴它有帮助:)

【解决方案5】：

您是否有不限制联系人 div 大小的具体原因？如果没有，那应该可以解决您的问题...

如果你这样做，你可以考虑用另一个div包裹这个div，并限制内部div的宽度（或者你包裹接触div并限制它，或者包裹它的内容并限制内部包装器）

【讨论】：