Question

视觉元素（矩形）向左漂移。你如何将这些矩形居中（它们是列出UL列表项目），因此它们在标题和列表下方对称地坐下。 w / out使用绝对单位

希望列表元素位于标题下方，如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>

Answer 1

您可以将此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>上清除浮动并向其添加display:inline-block

多数民众赞成：）

使用无序列表对中可视内容（具有流畅的响应布局）

1 个答案: