问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

浮动在弹性容器中不起作用

社区维基
1
新手上路，请多包涵

我想将文本（foo 链接）定位在页脚元素的右侧。

我需要保留页脚显示 flex 。

但是，当我将它设置为 flex 时， float:right 对于跨度不再起作用。

 <footer style="display: flex;">
     <span style="text-align: right;float: right;">
        <a>foo link</a>
     </span>
</footer>

https://jsfiddle.net/dhsgvxdx/

原文由 mlibre 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译htmlcssflexbox
阅读 299
2 个回答
得票最新
社区维基
1
✓ 已被采纳

float 属性在弹性容器中被忽略。

从 flexbox 规范：

3. Flex Containers： flex 和 inline-flex 显示值

弹性容器为其内容建立一个新的 _弹性格式化上下文_。这与建立块格式化上下文相同，只是使用了 flex 布局而不是块布局。

例如，浮动不会侵入弹性容器，弹性容器的边距不会与其内容的边距一起折叠。

float 和 clear 不要创建 flex 项目的浮动或间隙，也不要让它脱离流程。

相反，只需使用 flex 属性：

 footer {
    display: flex;
    justify-content: flex-end;
}

 <footer>
    <span>
       <a>foo link</a>
    </span>
</footer>

如果页脚中有更多项目，并且需要其他对齐选项，那么这里有两个指南：

原文由 Michael Benjamin 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1

如果你添加 margin-left: auto; 就像我在 jsfiddle 中所做的那样： https ://jsfiddle.net/dhsgvxdx/3/

 <body>
    <footer style="display: flex;">
        <span style="text-align: right;float: right; margin-left: auto;">
            <a>foo link</a>
        </span>
    </footer>
</body>

原文由 D.Soderberg 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题