float:center effect—the floating li element in the CSS box model is centered

There are often paging operations under some list pages. The style design of paging is generally to float the list in a div, but the floating list will only be arranged in the floating direction. To achieve an effect similar to "float: center", it is necessary to css control. The record is as follows:

<html>
<head>
	<meta charset="utf-8">
	<title>test</title>
	<style type="text/css">
		.demo {
			border: 1px solid #CCC;
			margin: 5px auto;
			overflow: hidden;
			width: 1430px;
		}
		.demo ul {
			float: left;
			position: relative;
			left: 50%;
		}
		.demo ul li {
			border: 1px solid #555;
			float: left;
			position: relative;/* can only use relative not absolute */
			padding: 5px;
			left: -50%; /* or right: 50%; */
			list-style: none;
			margin: 10px;
		}
	</style>
</head>
<body>
	<div class="demo">
		<ul>
			<li><a href="#">分页1</a></li>
			<li><a href="#">分页2</a></li>
			<li><a href="#">分页3</a></li>
			<li><a href="#">分页4</a></li>
			<li><a href="#">分页5</a></li>
		</ul>
	</div>
</body>
</html>

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325851685&siteId=291194637