html/css中的文本不會移動到左側

因此我開始編寫html/css文檔，並且無法準確找到文本在菜單欄中沒有正確放置的原因。我試圖把文字對齊：left;和邊距：0自動和填充：0和這些似乎都沒有工作。我也瀏覽了大量的問題，並通過validator.w3.org運行我的html/css。如果任何人都能幫助我，那會很棒！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!

編輯：我要解釋一下，用較小的文字菜單是一個我想移動幾個空格左邊，所以它不看標籤。我還修正了標題，以顯示實際問題。

來源

2014-01-06 dannav147

要居中的div＃菜單，DIV＃SITE_TITLE或兩者兼而有之？ – Andy

您是否嘗試過'文本對齊：中心'在身體或div你想要居中？ – Joe

不允許在'li'之外的'|'。 – putvande

復位樣式表的目的是爲了減少之類的默認行高度，頁邊距和標題的字體大小瀏覽器不一致，等等上。

* { 
    margin: 0; 
    padding: 0; 
}

或

進口

來源

2014-01-07 03:57:14 Sam

謝謝，這個工作完美！這是我應該在每個文檔中使用的東西，還是應該只在我無法弄清楚我的問題是什麼的情況下才使用它？我只是想確保我不會養成任何形式的壞習慣。 – dannav147

您沒有固定的寬度設置爲您的容器，所以他們是100％的寬度，你已經爲display: inline爲<li>，所以你可以用它來text-align:center簡單<ul>中心。

btw。正如@putvande在評論中所說的，你不能直接在<ul>裏面輸入<li>。爲了避免把|，使用CSS：

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

來源

2014-01-06 21:58:39 Andy

您是否嘗試添加此？

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

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

卸下UL對身體和填充邊緣看到它更好地集中http://jsfiddle.net/XaQbr/8/

另外，管道里的以外，這些都是無效

來源

2014-01-06 21:59:26 Huangism

試試這個： div＃menu ul {padding：0;}

右鍵單擊瀏覽器中的元素和c舔「檢查元素」。在那裏你可以看到顏色的尺寸，邊距和填充。（對於鉻至少...）

來源

2014-01-06 22:22:51 panteaandrei

您的標記無效。你不能擁有|或李之間的任何其他標籤或內容。分隔符應該使用左邊界或右邊界來完成。您可以使用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/

來源

2014-01-06 22:49:50 azzerd

html/css中的文本不會移動到左側

回答

相關問題