Question

我有以下页面http://jsfiddle.net/Leytgm3L/18/，您可以看到有6个指向不同城市的链接。我提出了以下css：

.cities-main  li {
        float: none;
        display: inline-block;
        text-align: center;
        margin-right: 10%;
        list-style: none;
        text-transform: uppercase;
        font-weight: 400;
        font-size: 18px;
    }

水平传播这个列表，但问题是它不在主div的中心......我怎么能这样做？

Answer 1

为了使您的城市列表居中，只需将以下内容应用于您的ul：

ul {
  text-align: center;
}

Answer 2

尝试添加以下规则：

var width = 200;
var height = 120;

//variables for scaling circle radius
var totPixels = (width * height);
var totWorldMeters = 510000000000;
var metersPerPixel = (totWorldMeters / totPixels);
var scaledRadius;

//scale the radius given in meters to pixels on the map
scaledRadius = (100 * (formattedGeoObjects[a].radius / metersPerPixel));
if(scaledRadius < 2) {
    scaledRadius = 2;
}

通过这样做，最后一个链接不会因为.cities-main{ padding: 0; text-align: center; } .cities-main > li:last-child{ margin-right: 0; }而进入新行。此外，第一个链接将位于其父元素的左边界。并且他们一直以中心为主。

这是一个小提琴：http://jsfiddle.net/04z3L5gs/

Answer 3

嗯，通常居中的元素取决于元素的维度。

尝试逐渐更改左右边距，使其位于您想要的位置。那就是你现在的代码。

但我建议您使用：

.cities-main  li {
        float: none;
        display: inline-block;
        text-align: center;
        margin-right: 10%;
        list-style: none;
        text-transform: uppercase;
        font-weight: 400;
        position: relative;
        left: 50px;
        font-size: 18px;
    }

修改元素的大小＆＃34;左：50px＆＃34;直到你满意为止。

还要考虑是否应该使用＆＃34; margin-right：10％＆＃34;

如何将我的ul li列表放在div中？

3 个答案: