Question

因此我开始处理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!

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

Answer 1

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

* {
  margin: 0;
  padding: 0;
}

或

导入

Answer 2

您尚未为容器设置固定宽度，因此它们的宽度为100％，您为display: inline设置了<li>，因此您只需使用text-align:center将其居中设置即可<ul>。

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

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

Answer 3

你试过添加吗？

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

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

删除主体上的边距并在ul上填充以查看它更好地居中http://jsfiddle.net/XaQbr/8/

也是li之外的管道，那些是无效的

Answer 4

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

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

Answer 5

您的标记无效。你不能拥有|或者li之间的任何其他标签或内容。分隔符应使用border-left或right完成。您可以使用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/

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

5 个答案: