gpt4 book ai didi

html - 如何在一条直线上居中链接列表。 CSS

转载 作者:行者123 更新时间:2023-11-28 05:53:23 24 4
gpt4 key购买 nike

您好!

我已经尝试了一段时间,在网上搜索但没有希望。我正在尝试使用 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;
}

最佳答案

编辑:

将链接放入无序列表 (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;
}

代码笔:http://codepen.io/anon/pen/RaOWrm

关于html - 如何在一条直线上居中链接列表。 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37198465/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com