在 CSS 中使 div 背景小于 100% 宽度?
Making div background less than 100% width in CSS?
我有一个简单的联系表,但我希望它有一些背景知识。但是,简单地放置 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;
}
将宽度属性添加到联系人样式,如:
.contact{
width: 80%;
}
这将减少宽度。更改值以适合您的设计。
如果你想居中 div 使用边距:
.contact {
width: 80%;
margin : 0 auto;
text-align: center;
background-color: #E0E0E0;
}
您可以将宽度设置为 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>
您可以简单地这样做:
form{
background-color: #E0E0E0;
width:50%; /* Put the width you want here */
margin:auto;
}
将所有内容放入容器并添加一些边距怎么样?
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 来适应上下文。
您是否有不限制联系人 div 大小的具体原因?
如果没有,那应该可以简单地解决您的问题...
如果你这样做,你可以考虑用另一个包裹这个 div,并限制内部 div 的宽度(要么你包裹接触 div 并限制它,或包装其内容并限制内部包装器)
我有一个简单的联系表,但我希望它有一些背景知识。但是,简单地放置 background-color
并不像我希望的那样工作。背景颜色是整个页面的宽度,但我只希望它覆盖联系表格周围的一小块区域。我已经按照我希望它看起来像什么的方式画了一张图片。
<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;
}
将宽度属性添加到联系人样式,如:
.contact{
width: 80%;
}
这将减少宽度。更改值以适合您的设计。
如果你想居中 div 使用边距:
.contact {
width: 80%;
margin : 0 auto;
text-align: center;
background-color: #E0E0E0;
}
您可以将宽度设置为 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>
您可以简单地这样做:
form{
background-color: #E0E0E0;
width:50%; /* Put the width you want here */
margin:auto;
}
将所有内容放入容器并添加一些边距怎么样?
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 来适应上下文。
您是否有不限制联系人 div 大小的具体原因? 如果没有,那应该可以简单地解决您的问题...
如果你这样做,你可以考虑用另一个包裹这个 div,并限制内部 div 的宽度(要么你包裹接触 div 并限制它,或包装其内容并限制内部包装器)