css - 宽度自适应，且内容右对齐

问题描述

问 题

如图所示的一个下拉菜单，想让菜单的宽度自适应，而不是和选项框同宽。但是按钮部分又需要右对齐。

当使用浮动，将按钮部分右对齐后，列表的宽度就无法自适应了。

所以，应该如何写，才能做到两个需求都能满足呢。

解决方案

看你的描述，需要右对齐的内容（两个button）的宽度应该是固定的，如果是这样，你可以设置li有一个合适的padding-right属性，让padding-right的大小能包含两个button的宽度，并且和左侧的文本之间有合适的间距，然后在两个button外边包一层父元素，设置

position: absolute;
top: 0px;
right: 0px;

因为是相对于li定位，所以需要把li设置为定位的父元素position: relative；
效果截图如下：

这篇关于css - 宽度自适应，且内容右对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！