div中的文本（或用其他术语表示UL）仅停留在div的右侧。无论我如何更改，内容都不会居中。
HTML：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Lakeside Books</title>
<link rel="stylesheet" type="text/css" href="masterstyle.css">
<meta name="viewsize" content="width-device-width,initial-scale=1.0">
<!--[if IE]>
<script type="text/javascript" src="_http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="sidebar">
<nav id="nav">
<div id="searchbar">
<form action="http://www.example.com/search.php">
<input type="text" name="search" placeholder="Enter Book Title"/>
</form>
</div>
<ul>
<li>
<a id="firstlink">
Home
</a>
</li>
<li>
<a id="secondlink">
Categories
</a>
</li>
<li>
<a id="thirdlink">
Bestsellers
</a>
</li>
<li>
<a id="fourthlink">
Contact
</a>
</li>
</ul>
</nav>
</div>
</div>
</body>
</html>
CSS：
body{
background-color: #f1f6f6;
}
#sidebar{
background-color: #212528;
position: fixed;
width: 20%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
}
#nav{
margin: 2em 1em 1em 1em;
text-align: right;
color: #888888;
display: block;
max-width: 100%;
}
#nav li{
list-style-type: none;
}
#searchbar{
padding-bottom: 0.5em;
text-align: center;
}
#searchbar input{
max-width: 100%;
}
#firstlink{
display: block;
padding: 0.5em 1.5em 0.5em 1.5em;
}
#secondlink{
display: block;
padding: 0.5em 1.5em 0.5em 1.5em;
}
#thirdlink{
display: block;
padding: 0.5em 1.5em 0.5em 1.5em;
}
#fourthlink{
display: block;
padding: 0.5em 1.5em 0.5em 1.5em;
}
如果您使用chromes inspect元素查看此图像，则可以清楚地看到li容器向右推动的次数多于将其自身在div中居中的位置。图片在这里-http://i.imgur.com/GfxLGtl.png
JSFiddle与上面包含的代码：
https://jsfiddle.net/4pxw4eus/
最佳答案
我猜您没有使用CSS重置，因此您的UL具有一些默认的左填充。
为您的ul和li添加可见边框，以更清楚地了解问题：>
关于javascript - Div中的文本卡在右侧，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29735054/