Html 向右对齐？

我试图将列表中的最后一个元素向右对齐：

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li id="right">right?</li>
</ul>

li {
    display: inline-block;
    margin: 0;
    padding: 2px;
}
ul {
    width: 300px;
    list-style: none;
    margin: 0;
    padding: 0;
}
li#right {
    text-align: right;
}

一个
两个
三
对吗

李{
显示：内联块；
保证金：0；
填充：2px；
}
保险商实验室{
宽度：300px；
列表样式：无；
保证金：0；
填充：0；
}
李#对{
文本对齐：右对齐；
}

它不起作用，所以我想我从根本上误解了一些事情。但是什么呢

---

这里有一把小提琴：

你的意思是

float:right而不是文本对齐

文本对齐将只在
li
中对齐文本，您的意思是
float:right而不是文本对齐

文本对齐将只对齐
li
文本对齐中的文本
将元素的文本向右对齐。它正在这样做。你就是看不见。如果你有
诸如此类的东西
诸如此类的东西
，你会看到路线像白天一样清晰

如果希望
本身位于右侧，请尝试使用
float:right
，但请记住，可能需要将其移动到第一个位置。
将元素的文本向右对齐。它正在这样做。你就是看不见。如果你有
诸如此类的东西
诸如此类的东西
，你会看到路线像白天一样清晰

如果您希望
本身位于右侧，请尝试使用
float:right
，但请记住，您可能需要将其移动到第一个位置。
只需添加
li:last child{float:right；}
并删除id，您不需要它
只需添加
li:last child{float:right；}
并删除id，您不需要它
您完全可以定位最后一个元素以实现您想要的，而无需应用任何clearfix来纠正由浮动引起的问题

ul {
    width: 300px;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}
li#right {
    position: absolute;
    right: 0px;
}

您完全可以定位最后一个元素以实现您想要的目标，而无需应用任何clearfix来纠正浮动引起的问题

ul {
    width: 300px;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}
li#right {
    position: absolute;
    right: 0px;
}

这里有一种方法：


HTML:

这里有一种方法：


HTML:

谢谢，但我正试图避免浮动，因为它会产生一些问题。你很可能需要使用clearfix方法-我想我有一个clearfix，但由于某些原因，它在调整大小时没有帮助。或者，我可能误解了某些内容。谢谢，但我正在尝试避免浮动，因为它会产生一些问题。您很可能需要使用clearfix方法-我想我有一个clearfix，但由于某些原因，它在调整大小时没有帮助。或者，我可能误解了什么。关于身份证的观点很好，谢谢。（尽管我试图避免浮动。）如果你不滥用浮动，浮动就可以了。但是在这种情况下，如果要对最后一个子元素使用浮点，那么也要将其余元素向左浮动，以避免
display:inline block
间隙。关于id的观点很好，谢谢。（尽管我试图避免浮动。）如果你不滥用浮动，浮动就可以了。但在这种情况下，如果要对最后一个子元素使用浮点，那么也要将其余元素向左浮动，以避免
display:inline block
间隙。啊，是的。谢谢父元素上的position:relative和元素上的position:absolute的组合实现了这一点！（像这样使用position:relative有问题吗？@Leo没有，元素已经相对定位了。必须特别说明允许绝对定位的子元素（li#right）相对于父元素（ul）而不是窗口绝对定位。我明白了，谢谢。这明确地说明了position:relative是我错过的。嗯，虽然这仍然有一个缺点，我想通过不使用float来避免：它会跳出包含框。（在我的情况下，这使得CSS有点复杂。）@Leo你有小提琴来告诉我你的意思吗？啊，是的。谢谢父元素上的position:relative和元素上的position:absolute的组合实现了这一点！（像这样使用position:relative有问题吗？@Leo没有，元素已经相对定位了。必须特别说明允许绝对定位的子元素（li#right）相对于父元素（ul）而不是窗口绝对定位。我明白了，谢谢。这明确地说明了position:relative是我错过的。嗯，虽然这仍然有一个缺点，我想通过不使用float来避免：它会跳出包含框。（在我的情况下，这使得CSS有点复杂。）@Leo你有小提琴来告诉我你的意思吗？谢谢。我应该提到我想避免浮动。（因为它在调整大小和更改布局时会引起一些问题。）不用担心，但是它引起的任何问题都应该由我的小提琴中包含的周围DIV来处理。如果没有，我希望你能找到另一个解决办法：-）谢谢溢出是令人困惑的。为什么是div而不是直接在ul上？谢谢。我应该提到我想避免浮动。（因为它在调整大小和更改布局时会引起一些问题。）不用担心，但是它引起的任何问题都应该由我的小提琴中包含的周围DIV来处理。如果没有，我希望你能找到另一个解决办法：-）谢谢溢出是令人困惑的。为什么是div而不是直接在ul上？
.container {
    overflow: auto;
}

ul {
    width: 300px;
    list-style: none;
    margin: 0;
    padding: 0;
    background: #ff3;
}

li {
    float: left;
    border: solid 1px blue;
    margin: 0;
    padding: 2px;
}

li#right {
    float: right;
}