gpt4 book ai didi

html - CSS/HTML 如何对齐文本

转载 作者:太空宇宙 更新时间:2023-11-04 04:01:19 24 4
gpt4 key购买 nike

今天我想知道如何水平对齐文本。 us.mineplex.com 论坛、商店、标题等完美地水平对齐。他们是怎么做到的?我试图自己弄清楚,需要一些帮助,谢谢。

CSS:

.header_container{
width: 100%;
height: 185px;
background-color: black;

}

.navtabscontainer{

background-color: #6ED16E;
border-top-left-radius: 9px;
border-top-right-radius: 9px;
border: solid;
border-color: blue;
position: relative;
top: 180px;
height: 75px;
text-align: center;
list-style: none;



}

.headerlogo{

background-image: url('logo.png');


}

.divider{

height: 49;
width: 3px;
background-color: white;
position: absolute;
left: 109px;
top: -16px;


}

.navtabs{

color: white;
text-decoration: none;
font-size: 20px;
position: absolute;
left: 50px;
top: 30px;
list-style-type: none;
text-align: center;


}

* {
margin: 0;


}

.textip{


border: solid;
border-color: blue;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
color: red;
font-size: 20px;
position: absolute;
right: 300px;
top: 100px;



}

HTML:

<html>
<head><title>Minetage</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>

<div class="header_container">
<h3 class="textip">Server IP: Minetage.com</h3>
<div class="header_logo">
<div class="navtabscontainer">
<ul class="navtabs">
<li href="Games">Games</i>
<li class="divider"></li>
<li href="Games">Forums</i>
<li class="divider"></li>
<li href="Games">Home</i>
<li class="divider"></li>
<li href="Games">Leaderboards</i>
<li class="divider"></li>
<li href="Games">Contact</li>
</ul>




</body>
</html>

最佳答案

您可以像这样使您的列表显示为内联:

.navtabs li {
display:inline;
}

这样您就不需要空列表项作为分隔符。

如果您想将它们隔开,请向内部的 anchor 添加左/右填充或边距(如果它是菜单,您无论如何都需要)。

<ul class="navtabs">
<li><a href="myPage.htm">Games</a></i>
<li><a href="myOtherPage.htm">Stuff</a></i>
</ul>

然后

ul.navtabs li a   {
display:block;
padding: 0 2em;
}

正在分配 display:inline;到列表项,然后 display:block;到 anchor 允许在不需要'display:inline-block'的情况下设置链接样式,这会导致旧版本的 IE 出现问题

此外,'href' is an attribute for anchors <a> , 未列出元素 <li> .如果您单击 <li> ;使用 href 属性,它不会做任何事情。

关于html - CSS/HTML 如何对齐文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22030620/

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