定心UL横跨容器

我有很难定心横跨容器的宽度3个li元素。我正在处理响应式布局，所以我不想在任何元素上使用固定宽度。这里是我的代码http://jsfiddle.net/vzNbr/定心UL横跨容器

公告提琴如果扩展被对准的容器，而不是中心左侧的输出画面。 CSS很简单：

.container { 
width: 70%; 
margin: 0 auto; 
} 

#about { 
background-color: #ebebeb; 
height: 100%; 
width: 100%; 
} 

#about ul.info { 
display: block; 
width: 100%; 
margin: 0 auto; 
list-style: none; 
padding: 0; 
} 

#about ul.info li { 
width: 20%; 
float: left; 
display: inline-block; 
vertical-align: top; 
margin: 1.5em; 
font-size: .8em; 
}

的截图： enter image description here

来源

2013-02-15 Ben

你的''有20％宽度的父母;有3个“li”达到60％;所以容器'ul'剩下40％的空间;自然地，40％（或更少）的空间使您的布局不以中心为中心;我认为你必须确保你的“容量”达到他们容器的100％; – mshsayem 2013-02-15 16:32:45

你需要拿出float:left，在display:table设置你的ul和li为display:table-cell。这是你的演示：http://jsfiddle.net/vzNbr/1/

来源

2013-02-15 16:34:16 otinanai

宾果！谢谢@otinanai – Ben 2013-02-15 16:39:18

很好的解决方案。并将边距改为填充。 – 2013-02-15 16:39:24

不完全知道为什么它浮左翼，但这似乎保持它更集中，但我怀疑这是最好的解决方案。

#about { 
    position: relative; 
} 
.container { 
    position: relative; 
    width: 70%; 
    left:20%; 
    }

来源

2013-02-15 16:29:04 David

是的，我知道我可以调整左右的容器和立场，但容器将通过其他元素使用，并想尝试和避免这种情况，感谢寿人:) – Ben 2013-02-15 16:38:53

尝试失去了浮动和变化的显示表细胞：

#about ul.info li { 
width: 20%; 
display: table-cell; 
vertical-align: top; 
margin: 1.5em; 
font-size: .8em; 
}

你可能必须调整填充等，但它应该做的伎俩。

来源

2013-02-15 16:30:21 Raad

谢谢@Raad这帮助了很多 – Ben 2013-02-15 16:37:50

*叹*必须很高兴被接受的答案，因为它是第一次发布，但这就是生活... – Raad 2013-02-15 16:50:49

如果你有3列，其宽度应为33,33％。要不让边距为此33％增加额外宽度，可以使用填充和框大小：边框。

http://jsfiddle.net/willemvb/n8gkK/

#about ul.info li { 
    width: 33.33%; 
    float: left; 
    display: inline-block; 
    padding: 1.5em; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
}

来源

2013-02-15 16:37:29

看看这就是你需要什么http://jsfiddle.net/vzNbr/2/

我把一些颜色只是清楚地看到它，但是，你只需要改变

#about ul.info li { 
    margin: 1.5em; 
}

这个

#about ul.info li { 
    margin:0 6.6666665%; 
}

来源

2013-02-15 16:40:23

到中心的元素，使用此代码片段：在其子女人数sizes.if你这个情况下，你有一个应该适合的容器不知道它的大小，检查它在Firebug或Chrome检查元素，并使用以下。

.centered { 
    position: based on your choice; 
    top: 50%; 
    left: 50%; 
    margin-top: -(container-element_height/2); 
    margin-left: -(container-element_width/2); 
}

如果你的容器元素没有已知的大小，你应该像表格一样规划你的布局。

来源

2013-02-15 16:45:48 Ramin

定心UL横跨容器

回答

相关问题