Question

我有以下链接Page 1 | Page 2 | Page 3 | .... | Page 10 我希望这些链接在我的网页中间显示为内嵌。这是代码：

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>

在这里，我的页面显示为项目符号列表，但是，在网页上，它们显示在屏幕右侧的行中。我希望它们在屏幕中间移动。我尝试过使用＆lt;中心＆gt;但它的作用是将它们移动到屏幕中间，如同在这里显示的一个列形状，但我希望它们排成一行。

Answer 1

您似乎缺少一些有助于将来使用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标签合并为一个（你真的不需要两个）并且我添加了'text-align：center;'对齐页面中心的文本。为了更好地了解这一点，我为您创建了一个关于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" />

这将使您能够在HTML页面上使用CSS编码。

Answer 2

ul { margin: 0 auto; }

也就是说，如果你的ul是父div中100％宽的唯一元素，它就会起作用。

如何使用html / css在网页中间移动链接？

2 个答案: