CSS - 与浮动右对齐
我对 CSS 还很陌生,具有以下 CSS / HTML:
<input type="reset" value="Clear" style="float: right;" />
<input type="submit" value="Send" style="float: right;" />
产生以下结果:
而不是所需的输出:
更改 HTML 元素的顺序似乎可以解决问题,但也是违反直觉的。
解决此类问题的一般方法是什么?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(5)
它们按照遇到的顺序浮动,第一个项目浮动到最右边,然后下一个项目浮动在它之后。
试试这个:
they are floated right in the order they are encountered, the first item is floated to the furthest right then the next item is floated right after it.
try this instead:
将它们放入容器 div 中并浮动,对吗?
Put them in a container div and float that right?
据我所知,在处理浮动时,元素在文档中出现的顺序(或更准确地说它们被解析的顺序)很重要。第一个元素首先布局,然后是下一个元素,然后......
As far as I know when dealing with floats the order in which the elements appear in the document (or more precisely in which they are parsed) is important. The first element gets layouted first and then the next and then ...
“float”参数将项目尽可能向右发送,直到它碰到另一个浮动元素。因此,第一个按钮(清除)向右移动,直到到达包含它的框的边缘。第二个按钮尝试执行相同的操作,但被已有的清除按钮阻止,因此停止在其左侧。
这可能是违反直觉的,因为如果将项目向右浮动,它们最终会反转,但如果将它们向左浮动,它们最终的顺序与浮动时的顺序相同。因此,您必须从外到内思考,而不是从左到右思考浮动如何根据代码中的顺序排列。
The "float" parameter sends the item to the right as far as it can, until it hits another floated element. Hence, the first button (Clear) moves to the right until it hits the margin of the box containing it. The second button tries to do the same, but is stopped by the clear button already there, so stops just to the left of it.
That may be counter-intuitive since items do end up reversed if you float them to the right, but if you float them to the left, they end up in the same order as when you floated them. Hence, instead of thinking left-to-right with how float will line up based on order in the code, you have to think outside-to-inside.