视觉元素(矩形)一直向左漂移。您如何使这些矩形居中(它们是列表 UL 列表项)以便它们对称地位于标题下方并且不使用绝对单位
希望列表元素像这样在标题下居中 http://uploadpie.com/7BJuH http://jsfiddle.net/Aarondv1/vmmsfhax/
/* * {border: 1px solid blue;
}
*/
.headercontainer {
border: 1px solid blue;
text-align: center;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
}
.bragbanner {
text-align: center;
}
div img {
max-width: 144px;
max-height: 35px;
-webkit-filter: grayscale(1);
filter: grayscale(1);
}
.mainarea {
/* text-align: center;
width: 65%;
border: 1px dotted orange;
margin-left: auto;
margin-right: auto;
overflow: hidden;
padding-left: auto;
padding-right: auto; */
max-width: 940px; /*What's the significance of 940px? */
margin: 0 auto;
padding: 0 5%;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
ul li {
border: 1px solid black;
width: 300px;
height: 300px;
float: left;
margin: 2.5%;
max-width: 45%;
float: left;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="headercontainer">
<p>30 years experience in Metro-Detroit law</p>
<h1>M</h1>
</header>
<!-- bRAG POINTS
<div class="bragbanner">
<img src="lawyers_logo.png">
<img src="avvo_logo.png">
<img src="legalnews_logo.png">
<img src="aba.jpg">
<img src="free-press.jpg"> -->
</div>
<div class="mainarea">
<ul>
<li><h3>Family Law</h3></li>
<li><h3>Domestic Law</h3></li>
<li><h3>Matrimonial Law</h3></li>
<li><h3>Probate Law</h3></li>
</ul>
</div>
<footer></footer>
</body>
</html>最佳答案
您可以将此 CSS 替换为您当前的 CSS，它会起作用。 CSS:
/* * {
border: 1px solid blue;
}
*/
.headercontainer {
border: 1px solid blue;
text-align: center;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
}
.bragbanner {
text-align: center;
}
div img {
max-width: 144px;
max-height: 35px;
-webkit-filter: grayscale(1);
filter: grayscale(1);
}
.mainarea {
/* text-align: center;
width: 65%;
border: 1px dotted orange;
margin-left: auto;
margin-right: auto;
overflow: hidden;
padding-left: auto;
padding-right: auto; */
max-width: 940px; /*What's the significance of 940px? */
margin: 0 auto;
padding: 0 5%;
text-align:center;
}
ul {
list-style: none;
padding: 0;
margin: 0;
width:100%;
}
ul li {
border: 1px solid black;
width: 300px;
height: 300px;
margin: 2.5%;
max-width: 45%;
display:inline-block;
}
我给 <ul> 设置了 100% 的宽度并在 <li> 上清除 float 并添加了 display:inline-block给他们
就是这样:)
关于html - 使用无序列表居中视觉内容(具有流体响应布局)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33722527/