如何使用html/css在網頁中間移動鏈接？

我有以下鏈接第1頁|第2頁|第3頁| .... |第10頁我希望這些鏈接在我的網頁中間內聯顯示。下面是代碼：如何使用html/css在網頁中間移動鏈接？

h2 { 
    font-family:"Arabic Typesetting",serif; 
} 
h2 { 
    font-size:50px; 
} 
ul{ 
    list-style-type:none; 
    margin:10; 
    padding:10; 
} 
li{ 
    display:inline; 
} 
<ul> 
    <li> <a href = "#page1.hmtl" style = "text-decoration:none"> Page 1 | </a> </li> 
    <li> <a href = "#page2.html" style = "text-decoration:none"> Page 2 | </a> </li> 
    <li> <a href = "#page3.html" style = "text-decoration:none"> Page 3 | </a> </li> 
    <li> <a href = "#page4.hmtl" style = "text-decoration:none"> Page 4 | </a> </li> 
    <li> <a href = "#page5.html" style = "text-decoration:none"> Page 5 | </a> </li> 
    <li> <a href = "#page6.html" style = "text-decoration:none"> Page 6 | </a> </li> 
    <li> <a href = "#page7.hmtl" style = "text-decoration:none"> Page 7 | </a> </li> 
    <li> <a href = "#page8.html" style = "text-decoration:none"> Page 8 | </a> </li> 
    <li> <a href = "#page9.hmtl" style = "text-decoration:none"> Page 9 | </a> </li> 
    <li> <a href = "#page10.hmtl" style = "text-decoration:none"> Page 10 | </a> </li> 
</ul>

在這裏我的網頁顯示爲項目符號列表，但是，網頁上出現在屏幕的右邊線。我希望他們能夠在屏幕中間轉移。我嘗試使用< center>，但是它的作用是將它們在屏幕中間以像這裏顯示的列的形式移動，但我希望它們排成一列。

來源

2013-12-07 Nathalie

你可以發佈相關的HTML和CSS爲您的導航？ – mdesdev

你是什麼意思？ – Nathalie

我編輯它。她發佈的信息，但它實際上出現在她的網頁.. – BuddhistBeast

看起來你錯過了幾個關鍵的組件，這將有助於未來使用HTML/CSS。我把你的代碼，並將其改製爲這樣：

h2 { 
    font-family:"Arabic Typesetting",serif; 
    font-size:50px; 
} 
ul{ 
    list-style-type:none; 
    margin:10px; 
    padding:10px; 
    text-align: center; 
} 
li{ 
    display:inline; 
}

我所做的只是雙方的H2標籤合併成一個（你真的不需要二），我添加了「文本對齊：中心;」對齊頁面中心的文字。爲了更好地瞭解這一點，我在JSFiddle上爲你創建了一個工作示例，可以找到here。另一個需要記住的關鍵是在每個尺寸的末尾使用「px」來製作一些東西。還有其他方法可以爲對象創建大小（即使用'em'和百分比），但如果您對HTML/CSS不熟悉，請堅持使用基本知識，直到您感覺舒適時使用em和百分比大小。無論哪種方式，這應該解決您的問題。最後一件事是確保您爲CSS使用單獨的頁面。你應該將下面的代碼在你的部分，像這樣：

<head> 
<link href="PUT THE URL TO THE CSS PAGE HERE" type="text/css" rel="stylesheet" /> 
</head>

如果您不使用另一個CSS頁面，只需複製上面的CSS代碼，創建一個新文檔，並將其保存任何你希望它是（也許coolstuff.css），然後使用該URL投入上面的例子，像這樣：

<link href="coolstuff.css" type="text/css" rel="stylesheet" />

和方案，讓您使用CSS代碼的HTML頁面。

來源

2013-12-07 21:34:12 BuddhistBeast

ul { margin: 0 auto; }

也就是說，如果你的ul是父級div中唯一的元素是100％寬的，它就會工作。

來源

2013-12-07 21:19:22 Duos

如何使用html/css在網頁中間移動鏈接？

回答

相關問題