1

我试图将.provincia包含无序列表的部分 ( ) 居中。

我尝试了一个标准margin: 0 auto，但它没有像我预期的那样工作。

我怎样才能解决这个问题？

这是我的小提琴演示：http: //jsfiddle.net/F6hrC/

CSS 

.poblaciones-container {
    width: 1400px;
    border: 1px solid black;
}

.poblaciones {
    margin: 0 auto;
}

.provincia {
    float: left;
    margin-left: 20px;
    width: 300px;
}

HTML 

<section class="poblaciones-container">
<section class="poblaciones fila2">
  <div class="provincia">
    <ul>
      <h2>Soria</h2>
            <li>Cuellar</li><li>El Espinar</li>
            <li>Real Sitio de San Ildefonso</li><li>Palazuelos de Eresma</li>
            <li>Cantalejo</li><li>La Lastrilla</li>
            <li>Nava de la Asunción</li><li>San Cristobal de Segovia</li>
            <li>Carbonero del Mayor</li>
          </ul>
        </div>
        <div class="provincia">
          <ul>
            <h2>Segovia</h2>
            <li>Almazán</li><li>Burgo de Osma</li>
            <li>Ólvega</li><li>San Esteban de Gormaz</li>
            <li>Ágreda</li><li>San Leonardo de Yague</li>
            <li>Golmayo</li><li>Covaleda</li>
            <li>Arcos de Jalón</li>
          </ul>
        </div>
        <div class="provincia">
          <ul>
            <h2>Ávila</h2>
            <li>Arévalo</li><li>Arenas de San Pedro</li>
            <li>Las Navas del Marqués</li><li>Candeleda</li>
            <li>Sotillo de la Adrada</li><li>El Tiemblo</li>
            <li>Cebreros</li><li>La Adrada</li>
            <li>El Barco de Ávila</li><li>El Hoyo de Pinares</li>
          </ul>
        </div>
      </section>
</section>
4

3 回答 3

1

要使元素居中，margin: 0 auto;您需要指定该元素的宽度。看看我的修复here。

你也有清除浮动的问题。clearfix我通过在列表末尾添加 a 来修复它。

如果宽度是固定的，那没关系，但如果您有动态宽度，您可以使用 javascript 动态添加元素的宽度。

于 2013-05-13T10:37:49.680 回答
0

一种简单的方法是使用inline-block显示类型而不是浮点数：

.poblaciones-container {
    width: 1400px;
    border: 1px solid black;
}

.poblaciones {
    margin: 0 auto; /* not needed anymore... */
    overflow: auto; /*  prevent floated elements from overflowing parent */
    outline: 2px dotted gray;
    text-align: center; /* to center the .provincia inline-blocks */
}

.provincia {
    display: inline-block; /* inline-blocks respond to text-align property */
    vertical-align: top; /* align blocks to top edge of parent container */
    text-align: left; /* Keep the content left-aligned, probably a good idea */
    margin-left: 20px; /* may be optional... */
    width: 300px;
    outline: 2px  dashed blue;
}

小提琴：http: //jsfiddle.net/audetwebdesign/4q7sb/

这种方法的优点是您不需要设置宽度，.poblaciones并且可以在不更改 CSS 或 HTML 的情况下添加其他列表。

于 2013-05-13T10:48:15.047 回答
0

这是解决方案。

CSS 更改：

ul > li{text-align:center;}

希望这可以帮助。

编辑

对不起，我误解了你的问题。

这是解决方案。

.poblaciones-container {
    border: 1px solid black;
    display: table;
    overflow: auto;
    width: 100%;
}

.poblaciones {
    display: table;
    margin: 0 auto;
}

希望这可以帮助。

于 2013-05-13T10:40:26.240 回答