Question

我一直在研究一些代码，但是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;
}

以下是截图：

如果有人可以帮我解决问题，我们将非常感谢您的帮助！谢谢：D

~rkshah

Answer 1

为您的页脚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 */
}

Answer 2

这很简单：

<强> CSS

#navigation_center ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#navigation_center ul li { display: inline; }

#navigation_center ul li a
{
    font-family:"Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
    text-decoration: none;
    padding: .2em 1em;
    color: #DDD;
    background-color: #0099CF;
    border-radius: 4px;
}

#navigation_center ul li a:hover
{
    color: #FFF;
    background-color: #00BEF9;
}

<强> HTML

   <div id="navigation_center">
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
    </ul>
    </div>

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

2 个答案: