html/css 中的文本不会向左移动答案

【问题标题】：Text in html/css won't move to the lefthtml/css 中的文本不会向左移动
【发布时间】：2014-01-24 10:44:40
【问题描述】：

所以我开始处理 html/css 文档，但无法准确找出文本在我的菜单栏中的位置不正确的确切原因。我试图把文本对齐：左；和 margin: 0 auto 和 padding: 0 这些似乎都不起作用。我还查看了大量问题并通过validator.w3.org 运行我的html/css。如果有人能够帮助我，那就太好了！

HTML：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <title>title!</title>
    <link href="css/styles.css" media="screen" rel="stylesheet" type="text/css" />
</head>

    <body>
    <div id="site_title">
        <h2><span>the problem</span></h2>
    </div>

    <div id="menu">
        <ul>
        <li><a href="is.html">is </a></li>|
        <li><a href="that.html">that </a></li>|
        <li><a href="my.html">my </a></li>|
        <li><a href="text.html">text </a></li>|
        <li><a href="isn'tcentered.html">isn't centered</a></li>
        </ul>
    </div>

</body>

</html>

css:

body
{
font-family: "Arial", "Helvetica", "Avant-Garde";
font-size: 14px;
color:black;
text-align: left;
background-image: white;
margin: 50px 40px 20px 100px ;
}

div#site_title  
{
font-size: 21px;
letter-spacing: 1.5px;
}

div#menu ul a
{
color:gray;
font-size: 16px;
text-decoration: none;
}

div#menu ul a:hover
{
color:black;
}

div#menu li
{
display: inline;
}

j fiddle so you can see!

编辑：我应该解释一下，带有较小文本的菜单是我想向左移动几个空格的菜单，这样它看起来就没有标签了。我还修复了标题，以便显示实际问题。

【问题讨论】：

您想将 div#menu、div#site_title 或两者都居中？
您是否尝试过 text-align: center 在 body 或您想要居中的 div 中？
li 之外的| 是不允许的。
@Joe ，我忘了解释我需要将它移到左边以便它与较大的文本对齐。很抱歉！
@Andy ，我应该说我需要将 div#menu 向左移动，而不是居中

标签： html css text centering

【解决方案1】：

重置样式表的目标是减少浏览器在默认行高、页边距和标题字体大小等方面的不一致。

* {
  margin: 0;
  padding: 0;
}

或

导入

【讨论】：

谢谢你，这很完美！这是我应该在每个文档中使用的东西，还是应该只在我无法弄清楚我的问题是什么的情况下使用它？我只是想确保我没有养成任何不良习惯。

【解决方案2】：

您没有为容器设置固定宽度，因此它们是 100% 宽度，您已经为 display: inline 设置了 <li>，因此您可以使用 text-align:center 将其居中设置为 <ul>。

顺便说一句。正如@putvande 在评论中所说，你不能直接在<ul> 里面，你只能放<li>。为避免放置|，请使用此css：

div#menu li:after {
    content:'|';
}

【讨论】：

【解决方案3】：

你试过添加这个吗？

div#menu ul {
    text-align: center;
}

http://jsfiddle.net/XaQbr/6/

删除 body 上的 margin 和 ul 上的 padding 以使其更好地居中http://jsfiddle.net/XaQbr/8/

还有li以外的管道，都是无效的

【讨论】：

【解决方案4】：

试试这个： div#menu ul{padding:0;}

右键单击浏览器中的元素，然后单击“检查元素”。在那里您可以看到颜色的尺寸、边距和填充。（至少对于 chrome...）

【讨论】：

【解决方案5】：

您的标记无效。您不能拥有 |或 li 之间的任何其他标签或内容。分隔符应该使用左边界或右边界来完成。您可以使用 li 上的行高和不使用空格的左/右填充来控制分隔符的高度。

<div id="menu">
    <ul>
    <li><a href="is.html">is</a></li>
    <li><a href="that.html">that</a></li>
    <li><a href="my.html">my</a></li>
    <li><a href="text.html">text</a></li>
    <li><a href="isn'tcentered.html">now centered</a></li>
    </ul>
</div>

CSS：

div#menu ul a
{
    color:gray;
    font-size: 16px;
    text-decoration: none;    
    padding:0 10px;
}

div#menu ul a:hover
{
    color:black;
}

div#menu li
{
    display: inline;    
    line-height:14px;
    border-left:1px solid gray;
}

div#menu li:first-child{
     border-left:none;   

}

http://jsfiddle.net/XaQbr/10/

【讨论】：