關於HTML元素位置

-2

我是新來的HTML，CSS。我正在嘗試使用Dreamweaver創建一個網頁。關於HTML元素位置

現在我的頁面上只有3件東西。一箇中心對齊的h1標題，一個段落和一個列表。

我通過使用「px」進行定位，將段落和列表完全放在Dreamweaver實時瀏覽器的頁面中心。但是這個位置在Firefox中完全錯過了，而在Chrome中則完全不同。即使標題不在中間對齊的中間。當我重新調整窗口大小時，列表保持不變，但標題和段落根據窗口大小移動。

請解釋這裏發生了什麼，以及如何解決它。再一次，我是這個新手！

謝謝...

這是我的HTML文件：

<!doctype html> 
<html> 
<head> 
<title>My web page</title> 
<link href="mycss.css" rel="stylesheet" type="text/css"> 
<h1>Welcome!</h1> 
<body> 
<nav id="nav"> 
<ul> 
<li><a href="url">Home</a></li> 
<li><a href="url">About Me</a></li> 
<li><a href="url">Importent Links</a></li> 
</ul> 
</nav> 
<p>About Me</p> 
<p>About Me</p> 
</body> 
</html>

這是我的CSS文件：

h1 { 
    text-align: center; 
} 

nav { 
    display: block; 
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif; 
    color: #202020; 
    list-style-type: none; 
} 

p { 
    display: block; 
    text-align: center; 
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif; 
    color: 202020; 
    top: -2em; 
    position: relative; 
    left: -19em; 
} 
ul { 
    list-style-type: none; 
    padding-top: 0px; 
    padding-right: 0px; 
    padding-bottom: 0px; 
    padding-left: 0px; 
    position: relative; 
    left: 22em; 
    top: -2em; 
} 

a { 
    text-decoration: none; 
    padding-left: 15px; 
    padding-right: 15px; 
    padding-top: 10px; 
    padding-bottom: 10px; 
    display: block; 
    float: left; 
    border: 1px none #000000; 
    position: static; 
} 
a:link { 
    color: #77AED5; 
} 
a:hover { 
    color: #418CC5; 
} 
a:visited { 
    color: #6D4AFB; 
}

小提琴：http://jsfiddle.net/txZ5K/

來源

2014-03-01 user3367020

你能告訴我們一些代碼？ –

JSFiddle拜託.. – Trent

您需要編輯原始問題並在'

'標籤之間添加代碼。 –

中是相對的。你不能爲此目的指定一個常量，因爲每個設備和屏幕都有自己的維度，一個是正確的，另一個是錯誤的。
你可以做的是例如設置Position:relative,margin-left:auto,margin-right:auto。或者添加<center>標記，具體取決於您的具體情況。如果您發佈代碼，我們可能會提供更多幫助。

編輯

發佈您的代碼後，我將邀請你學習一些CSS，特別是positioning，display，和浮動。
請注意，當您將position:relative設爲left和top時，它將會附加到此固定位置，而不是動態的。

這是對您的代碼demo的編輯。不要忘了參考提供的鏈接獲取更多信息;）
祝你好運

來源

2014-03-01 00:44:38 user2517028

我只是舉例說明，他表示位置是在「px」，這意味着它是固定的！也許我錯了，但我認爲這是值得一提的一點 – user2517028

如何在這裏發佈HTML代碼？在寫這裏的時候我的代碼會被解析...... – user3367020

當你編寫你的代碼時，突出顯示它，然後點擊帶有'code'工具提示的小圖標。或打開本網站JSFiddle.net，編寫代碼，點擊保存，複製鏈接並將其添加到您的問題！ – user2517028

這可能是一個情況，其中position不是你想要解決這個問題。相反，在段落塊上使用margin: 0 auto應該將其與父寬度的中心對齊。 li不是什麼需要集中。您最好將父級ul的CSS設置爲display: block; margin: 0 auto;以使列表居中。

來源

2014-03-01 00:48:26

這是你在追求什麼？

HTML

<h1>Welcome!</h1> 
<nav id="nav"> 
<ul> 
<li><a href="url">Home</a></li> 
<li><a href="url">About Me</a></li> 
<li><a href="url">Importent Links</a></li> 
</ul> 
</nav> 
<p>About Me</p>

CSS

* { 
    text-align:center 
} 

h1 { 
    text-align: center; 
} 

nav { 
    display: block; 
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif; 
    color: #202020; 
    list-style-type: none; 
} 

p { 
    display: block; 
    text-align: center; 
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif; 
    color: 202020; 
    position: relative; 
} 

ul { 
    list-style-type: none; 
    padding-top: 0px; 
    padding-right: 0px; 
    padding-bottom: 0px; 
    padding-left: 0px; 
    position: relative; 
} 

ul li { 
    display:inline-block; 
} 

a { 
    text-decoration: none; 
    padding-left: 15px; 
    padding-right: 15px; 
    padding-top: 10px; 
    padding-bottom: 10px; 
    border: 1px none #000000; 
} 

a:link { 
    color: #77AED5; 
} 

a:hover { 
    color: #418CC5; 
} 

a:visited { 
    color: #6D4AFB; 
}

小提琴：http://jsfiddle.net/txZ5K/2/

來源

2014-03-01 01:27:12

關於HTML元素位置

回答

相關問題