gpt4 book ai didi

html - 将页脚列表居中并使其元素宽度相同

转载 作者:行者123 更新时间:2023-11-28 11:57:56 26 4
gpt4 key购买 nike

我一直在编写一些代码,但是 css 对我来说真的很傲慢,它不会让我的圆列表项的宽度和高度都相同 :( 另外,当我创建页脚时,我的列表不会居中在页面中并固定在左侧。

代码如下:

<html lang="en">
<head>
<title>PAGE | Home</title>
<link rel="stylesheet" href="css/layout.css" />
<link rel="stylesheet" href="css/page.css" />
<link rel="stylesheet" href="css/main.css" />
</head>

<body>
<div class="wrapper">
<div class="container">
<img class="logo" src="img/logo.png" />
</div>
<div class="footer">
<ul>
<li><a>0</a></li>
<li><a>1</a></li>
<li><a>2</a></li>
<li><a>3/a></li>
<li><a>4</a></li>
<li><a>5</a></li>
<li><a>6</a></li>
<li><a>7</a></li>
</ul>
</div>
</div>

<script src="js/jquery.js" type="text/javascript"></script>
</body>

这是 CSS:

.loginFrame {
position: fixed;
border: 1px solid hsl(0, 0%, 60%);
border-radius: 2px;
background-color: #EAEAEA;
padding: 40px;
-webkit-box-shadow: 0 8px 6px -6px hsl(0, 0%, 60%);
-moz-box-shadow: 0 8px 6px -6px hsl(0, 0%, 60%);
box-shadow: 0 8px 6px -6px hsl(0, 0%, 60%);
}

.logo {
background: url("../img/logo.png") no-repeat center center;
height: 157px;
width: 477px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -238.5px;
margin-top: -78.5px;
opacity:0.6;
filter:alpha(opacity=60);
}

.wrapper {
margin-left: auto;
margin-right: auto;
position: relative;
min-height: 99%;
}

.footer{
height: 50px;
bottom: 3;
width: inherit;
text-align: center;
position: absolute;
}
.footer ul {
margin: 0;
padding: 0;
display: inline;
}
.footer ul li {
display: inline;
list-style: none;

}
.footer ul li:after {
content: " ";
}
.footer ul li:last-child:after {
content: "";
}
.footer ul li a {
width: 200px;
height: 100px;
border-radius: 50%;
color: white;
background-color: #3061a3;
padding: 20px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
margin: 0 8px;
}
.footer ul li a:hover {
cursor: pointer;
background-color: #3974c3;
text-decoration: none;
}

截图如下:

picture

如果有人能帮助我解决问题,将不胜感激!谢谢:D

~阿克沙

最佳答案

设置text-align:center为您的页脚 <ul>用于居中菜单项:

.footer ul {
margin: 0;
padding: 0;
display: inline;
text-align:center; /* added */
}

设置display:block<a>在您的页脚菜单中自定义宽度:

.footer ul li a {
width: 200px;
height: 100px;
border-radius: 50%;
color: white;
background-color: #3061a3;
padding: 20px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
margin: 0 8px;
display:block; /* added */
}

关于html - 将页脚列表居中并使其元素宽度相同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20014926/

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