CSS - 与浮动右对齐

发布于 2024-08-22 18:40:14 字数 568 浏览 6 评论 0 原文

我对 CSS 还很陌生,具有以下 CSS / HTML:

<input type="reset" value="Clear" style="float: right;" />
<input type="submit" value="Send" style="float: right;" />

产生以下结果:

替代文字

而不是所需的输出:

更改 HTML 元素的顺序似乎可以解决问题,但也是违反直觉的。

解决此类问题的一般方法是什么?

I'm still pretty green at CSS, having the following CSS / HTML:

<input type="reset" value="Clear" style="float: right;" />
<input type="submit" value="Send" style="float: right;" />

Produces the following results:

alt text

Instead of the desired output:

alt text

Changing the order of the HTML elements seems to fix the issue but is also counter-intuitive.

What is the general solution to this kind of problems?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

拧巴小姐 2024-08-29 18:40:14

它们按照遇到的顺序浮动,第一个项目浮动到最右边,然后下一个项目浮动在它之后。

试试这个:

<div style="float: right;">
<input type="reset" value="Clear" style="float: left;" /> 
<input type="submit" value="Send" style="float: left;" /> 
</div>

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 style="float: right;">
<input type="reset" value="Clear" style="float: left;" /> 
<input type="submit" value="Send" style="float: left;" /> 
</div>
帅气尐潴 2024-08-29 18:40:14

将它们放入容器 div 中并浮动,对吗?

Put them in a container div and float that right?

放我走吧 2024-08-29 18:40:14
<div style="float:right;">
  <input type="reset" value="Clear" />
  <input type="submit" value="Send" />
</div>
<div style="float:right;">
  <input type="reset" value="Clear" />
  <input type="submit" value="Send" />
</div>
羞稚 2024-08-29 18:40:14

据我所知,在处理浮动时,元素在文档中出现的顺序(或更准确地说它们被解析的顺序)很重要。第一个元素首先布局,然后是下一个元素,然后......

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 ...

像极了他 2024-08-29 18:40:14

“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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文