【发布时间】：2015-04-14 20:48:08
【问题描述】：
在 div 内，我想要一个全宽背景颜色并将内容居中。我在其他一些帖子中读到它需要一个外部 div 来设置背景颜色，然后是一个内部 div 与我的内容的宽度和margin:0 auto;。我试过了，但它不起作用。我尝试将我的内容向左浮动，但这也不起作用。
这是我的代码。问题出在我放置背景颜色的div class="themeDesign" 中。在div class="themeDesignicons" 中，当我放置width:1000px 时，li 元素之一延伸到下一行，但使用width:1300px，它们出现在同一行而不居中。为什么？第一个孩子重要吗？我不能继续。提前致谢
*{
margin:0px;
padding:0px;
}
body{
width:100%;
}
header{
background-color:#088da5;
overflow:hidden;
padding:15px 0;
}
.main-header{
width:1300px;
margin:0 auto;
}
.main-header .left-mainheader{
float:left;
margin-right:400px;
}
.main-header .left-mainheader ul li{
display:inline-block;
margin-right:26px;
}
.main-header .left-mainheader li a{
text-decoration:none;
color:white;
}
.main-header .right-mainheader{
float:left;
}
.main-header .right-mainheader ul li{
display:inline-block;
margin-right:15px;
}
.main-header .right-mainheader ul li a{
text-decoration:none;
color:white;
}
.left-mainheader img{
padding-right:8px;
}
header .header h1{
background-image:url(images/logoheader.png);
width:440px;
height:84px;
margin:60px auto;
overflow:hidden;
clear:both;
}
.header ul{
margin:25px auto;
width:440px;
}
.header li {
display:inline-block;
margin:0 15px 0 0;
}
.header li a{
color:black;
text-decoration:none;
font-size:15px;
font-family: tahoma;
}
header li a:hover{
text-decoration:underline;
}
.header .headermesa{
border-top:1px solid #666633;
}
.slider{
background-color:#f7f8fa;
}
.slidermesa{
margin:0 auto;
width:1200px;
height:421px;
}
.slide img{
border-top:1px solid #666633;
width:1200px;
height:421px;
}
.themeDesign{
background-color:#f7f8fa;
}
.themedesignheadings{
margin:0 auto;
width:1000px;
padding:35px 0;
border-bottom:1px dashed #877676;
}
.themeDesignicons{
width:1000px;
margin:0 auto;
}
.themeDesignicons ul li{
display:inline-block;
width:250px;
}<!DOCTYPE html>
<html>
<head>
<title>-Tutorial for psd-revenant</title>
<meta charset="utf-8">
</head>
<body>
<header>
<div class="main-header">
<div class="left-mainheader">
<ul>
<li>
<a href="#"><img src="images/phoneIcon-header.png"/> +565 975 658</a>
</li>
<li>
<a href="#"><img src="images/emailheader3.png"/>info@premiumcoding.com</a>
</li>
<li>
<a href="#"><img src="images/timeheader2_03.png"/>Monday-Friday : 8.00-20.00</a>
</li>
</ul>
</div>
<div class="right-mainheader">
<ul>
<li><a href="#">Latest News</a></li>
<li><a href="#">Login</a></li>
<li><a href="#">Register</a></li>
<li><a href="#">About Us</a></li>
</div>
</div>
<div class="header">
<h1></h1>
<div class="headermesa">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Apparel</a></li>
<li><a href="#">Fashion</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</header>
<div class="slider">
<div class="slidermesa">
<div class="slide">
<img src="images/mainslide.png"/>
</div>
</div>
</div>
<div class="themeDesign">
<div class="themedesignheadings">
<h2>Check our latest Wordpress Theme which implements a Page Builder and a Revolution Slider</h2>
<p>Learn how to build Wordpress Themes with ease with a premium Page Builder which allows you to add new Pages in seconds!</p>
</div>
<div class="themeDesignicons">
<ul>
<li>
<div class="disc-cam">
<div class="icon cam2"></div>
</div>
<div class="disc-text">
<h3>Responsive Design</h3>
<p>Lorem ipsum dolor sit amet, co
ctetuer adipiscing elit, sed di
nonummy nibh euismod te.</p>
<a href="#">Read More<img src="images/arrow.png"/></a>
</div>
</li>
<li>
<div class="disc-cam">
<div class="icon cam2"></div>
</div>
<div class="disc-text">
<h3>Responsive Design</h3>
<p>Lorem ipsum dolor sit amet, co
ctetuer adipiscing elit, sed di
nonummy nibh euismod te.</p>
<a href="#">Read More<img src="images/arrow.png"></a>
</div>
</li>
<li>
<div class="disc-cam">
<div class="icon cam2"></div>
</div>
<div class="disc-text">
<h3>Responsive Design</h3>
<p>Lorem ipsum dolor sit amet, co
ctetuer adipiscing elit, sed di
nonummy nibh euismod te.</p>
<a href="#">Read More<img src="images/arrow.png"></a>
</div>
</li>
<li>
<div class="disc-cam">
<div class="icon cam2"></div>
</div>
<div class="disc-text">
<h3>Responsive Design</h3>
<p>Lorem ipsum dolor sit amet, co
ctetuer adipiscing elit, sed di
nonummy nibh euismod te.</p>
<a href="#">Read More<img src="images/arrow.png"></a>
</div>
</li>
</ul>
</div>
</div>【问题讨论】：
-
您的 html 在多个地方损坏，您到处都缺少结束标记。你能修复和更新你的代码吗？
-
这个页面有一个很好的例子：molty.no（挪威语）（检查 CSS 中的 .center）