垂直对齐列表项到底

我已阅读了大量本网站和其他人的相关文章，似乎我仍然缺少一些非常基本的东西。垂直对齐列表项到底

我有一个父div和无序列表。该div有一个高度，我想列出项目是内联行和父div的底部。

谢谢！

<div class="parent"> 
    <ul> 
     <li> Item 1 </li> 
     <li> Item 1 </li> 
     <li> Item 1 </li> 
     <li> Item 1 </li> 
    </ul> 
</div> 
.parent { 
    border: 1px solid lime; 
    height: 100px; 
} 
ul { 
    border: 1px solid black; 
} 
li { 
    border: 1px solid red; 
    display: table-cell; 
    vertical-align: bottom 
}

来源

2014-09-02 Jason Wagner

一种方法是在.parent上添加一个全高（伪）元素，以影响父级的基线，并将内联级元素移动到框的底部，然后使用vertical-align: bottom声明以保留元素 - 包括字母有伸 - 在父：

EXAMPLE HERE

.parent:after { 
    content: ""; 
    display: inline-block; 
    height: 100%; 
    vertical-align: bottom; 
} 

ul { 
    display: inline-block; 
    vertical-align: bottom; 
} 

li { float: left; }

你可以参考我的回答进一步的信息：

How to align a label to the "BOTTOM" of a div in CSS?

来源

2014-09-02 20:01:24

JSFIDDLE

你父标签和position:absolute; bottom:0px添加position:relative到您的列表，所以它坚持到div的底部。编号：已更新jsfiddle链接。

来源

2014-09-02 19:58:05 Kamil

感谢卡米尔我试图走这样一条路，但它会导致一大堆的bug环比下跌的不同的断点。如果只是这样，我只会沿着这条路线走下去。 – 2014-09-02 20:00:37

@JasonWagner，什么样的错误？你可以添加你的问题的DOM元素，得到的错误？ – jtheletter 2014-09-02 20:02:49

也许，“错误”是错误的术语。我对这部分有其他绝对的立场，它需要在多个断点上进行严肃的重构。 – 2014-09-03 17:00:38

可以使用

display: table-cell;

在父DIV

JS FIDDLE

来源

2014-09-02 20:06:49

下面是使用自己的代码更容易的解决方案...

Link ->

这里是CSS

.parent { 
    border: 1px solid lime; 
    height: 100px; 
    display: table-cell; 
    vertical-align: bottom; 
} 
ul { 
    display: inline-block; 
    display: table-cell; 
    border: 1px solid black; 
} 
li { 
    border: 1px solid red; 
    display: table-cell; 
}

下面是HTML

<div class="parent"> 
    <ul> 
     <li> Item 1 </li> 
     <li> Item 1 </li> 
     <li> Item 1 </li> 
     <li> Item 1 </li> 
    </ul> 
</div>

来源

2014-09-02 20:56:18 Allan

垂直对齐列表项到底

回答

相关问题