4

我一直在尝试使用 CSS 将#refer's 的ul内容对齐在屏幕中央。

<div id="refer" style="border:1px solid red">
    <ul>
        <li><a href="#" class="circlelink">One</a>
        </li>
        <li><a href="#" class="circlelink">Two</a>
        </li>
        <li><a href="#" class="circlelink">Three</a>
        </li>
    </ul>
</div>



.circlelink {
    display:block;
    width:100px;
    height:100px;
    border-radius:50px;
    font-size:20px;
    color:#fff;
    line-height:100px;
    text-align:center;
    text-decoration:none;
    background:linear-gradient(to bottom, #719ECE, #719FCE);
}

.circlelink:hover {
    text-decoration:none;
    background:#719ECE;
    box-shadow: 0 0 8px rgba(0, 0, 0, .8);
    -webkit-transform: scale(1.05, 1.07);
    -moz-transform: scale(1.05, 1.07);
}

#refer {
    position:absolute;
    top:20%;
    width:100%;
    margin-left:auto;
    margin-right:auto;
}

#refer ul {
    clear:both;
    margin: 0;
    padding: 0;
}

#refer ul li {
    display:block;
    position: relative;
    float: left;
    height: auto;
    width: 200px;
    padding: 0;
    margin-left: 10px;
    list-style: none;
    text-align: center;
    white-space: nowrap;
}

小提琴

4

4 回答 4

6

这在你的小提琴中对我有用：

* {
    padding:0;
    margin:0;
}
#refer {
    margin:20% 0 0;
    width:100%;
    /*
    position:absolute;
    top:20%;
    width:100%;
    margin-left:auto;
    margin-right:auto;
    */
}
#refer ul {
    text-align:center;
    /*
    clear:both;
    margin: 0;
    padding: 0;
    */
}
#refer ul li {
    display:inline-block;
    position: relative;
    /* float: left; */
    height: auto;
    width: 100px;
    padding: 0;
    margin:0 50px;
    list-style: none;
    text-align: center;
    white-space: nowrap;
    border:#0f0 solid 1px;
}
.circlelink {
    display:block;
    width:100px;
    height:100px;
    border-radius:50px;
    font-size:20px;
    color:#fff;
    line-height:100px;
    text-align:center;
    text-decoration:none;
    background:linear-gradient(to bottom, #719ECE, #719FCE);
}
.circlelink:hover {
    text-decoration:none;
    background:#719ECE;
    box-shadow: 0 0 8px rgba(0, 0, 0, .8);
    -webkit-transform: scale(1.05, 1.07);
    -moz-transform: scale(1.05, 1.07);
}
于 2013-04-21T02:17:15.993 回答
3

代码：jsfiddle

您所要做的就是：

  1. 添加text-align:center;到#refer ul
  2. 换成in display:block;_display:inline-block;#refer ul li
  3. float:left;从中删除#refer ul li

此外，请确保#refer ul提供min-width所有圆圈所需的宽度，以确保如果浏览器窗口太小，它不会折叠。

此外，最好width从#refer ul li. 让内容<a>指定宽度

于 2013-04-21T02:11:56.530 回答
0

这里是

.circlelink {

    display:block;

    width:100px;

    height:100px;

    border-radius:50px;

    font-size:20px;

    color:#fff;

    line-height:100px;

    text-align:center;

    text-decoration:none;

    background:linear-gradient(to bottom, #719ECE, #719FCE);

}

.circlelink:hover {

    text-decoration:none;

    background:#719ECE;

    box-shadow: 0 0 8px rgba(0, 0, 0, .8);

    -webkit-transform: scale(1.05, 1.07);

    -moz-transform: scale(1.05, 1.07);

}

#refer {

    position:absolute;

    top:20%;

    width:100%;

    margin-left:auto;

    margin-right:auto;
    text-align:center;
}

#refer ul {

    clear:both;

    margin: 0;

    padding: 0;

}

#refer ul li {

    display:inline-block;

    position: relative;

    height: auto;

    width: 200px;

    padding: 0;

    margin-left: 10px;

    list-style: none;

    text-align: center;

    white-space: nowrap;

}
于 2013-04-21T01:44:16.040 回答
0

用div包裹你的ul会有所帮助

http://jsfiddle.net/ptMwH/11/这里检查一下

<div id="refer" style="border:1px solid red">
    <div class="wrapper">
    <ul>
        <li><a href="#" class="circlelink">One</a>
        </li>
        <li><a href="#" class="circlelink">Two</a>
        </li>
        <li><a href="#" class="circlelink">Three</a>
        </li>
    </ul>
    </div>
</div>
于 2013-04-21T02:24:30.240 回答