Question

您好！

我已经尝试了一段时间，在网上搜索但没有希望。我试图使用CSS将这些链接在屏幕中心的直线上对齐。但是，我还没有设法这样做...答案很感激。： - ）

亲切的问候克里斯托弗

<!DOCTYPE html>
<html>
<head>
<title>WikiPeople</title>

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

</head>
<body bgcolor="black">

<br />
<br />
<br />

<a href="a-z.html"> A-D </a>
<a href="a-z.html"> E-H </a>
<a href="a-z.html"> I-L </a>
<a href="a-z.html"> M-Q </a>
<a href="a-z.html"> R-U </a>
<a href="a-z.html"> V-Z</a>
</body>
</html>



p {
color: red;
font-family: Times;
font-size: 15px;
}
/* unvisited link */
a:link {
color: red;
}

/* visited link */
a:visited {
color: red;
}

/* mouse over link */
a:hover {
   color: hotpink;
 }

/* selected link */
a:active {
color: blue;
}
a:link, a:visited, a:hover, a:active {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center; 
text-decoration: none;
display: inline-block;
border: none;
outline: none;
}

Answer 1

编辑：

将链接放在无序列表（ul）中，并将display: inline-block分配给li元素。将ul包装在您指定为text-align: center;的div中：

<div class="x">
  <ul>
    <li><a href="#">link_1</a></li>
    <li><a href="#">link_2</a></li>
    <li><a href="#">link_3</a></li>
  </ul>
</div>

CSS：

.x {
  text-align: center;
}
ul {
  width: auto;
}
li {
  display: inline-block;
}

codepen：http://codepen.io/anon/pen/RaOWrm

Answer 2

我会给你答案

<强> HTML

<body bgcolor="black">

<br />
<br />
<br />
<div class="center">
<a href="a-z.html"> A-D </a>
<a href="a-z.html"> E-H </a>
<a href="a-z.html"> I-L </a>
<a href="a-z.html"> M-Q </a>
<a href="a-z.html"> R-U </a>
<a href="a-z.html"> V-Z</a>
</div>
</body>

<强> CSS

p {
color: red;
font-family: Times;
font-size: 15px;
}
/* unvisited link */
a:link {
color: red;
}

/* visited link */
a:visited {
color: red;
}

/* mouse over link */
a:hover {
   color: hotpink;
 }

/* selected link */
a:active {
color: blue;
}
a:link, a:visited, a:hover, a:active {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center; 
text-decoration: none;
display: inline-block;
border: none;
outline: none;
}
.center{
  text-align:center;
}

变化 - 我将链接添加到div中 - 我添加了一个名为center

的类

<强>样本

enter link description here

Answer 3

通过遵循约翰内斯的建议然后添加中心标签

来解决问题

代码如下：

 <center>
<ul>
<li><a href="a-z.html"> A-D </a></li>
<li><a href="e-h.html"> E-H </a></li>
<li><a href="i-l.html"> I-L </a></li>
<li><a href="m-q.html"> M-Q </a></li>
<li><a href="r-u.html"> R-U </a></li>
<li><a href="v-z.html"> V-Z</a></li>
</ul>
</center>


li {
display: inline-block;
}

如何以直线列出链接列表。 CSS

3 个答案: