我正在尝试将<button>
-tag的内部元素与flexbox的居中对齐justify-content:center
。但是Safari不会将它们居中。我可以将相同的样式应用于任何其他标签,并且可以按预期工作(请参见<p>
-tag)。仅按钮左对齐。
尝试使用Firefox或Chrome,您会发现其中的区别。
有什么我必须覆盖的用户代理样式?或对此问题有任何其他解决方案?
div {
display: flex;
flex-direction: column;
width: 100%;
}
button, p {
display: flex;
flex-direction: row;
justify-content: center;
}
<div>
<button>
<span>Test</span>
<span>Test</span>
</button>
<p>
<span>Test</span>
<span>Test</span>
</p>
</div>
在某些浏览器中,除了在和之间切换之外,该<button>
元素不接受对其display
值的更改。这意味着元素不能是flex或grid容器,也不能是a。block``inline-block``<button>``<table>
除了<button>
元素之外,您可能还会发现此约束也适用于<fieldset>
和<legend>
元素。
有关更多详细信息,请参见下面的错误报告。
注意:虽然它们不能是弹性容器,但是<button>
元素可以是弹性项目。
有一个简单易用的跨浏览器解决方法,可以解决此问题:
包裹的内容button
中span
,使span
柔性容器。
调整后的HTML(button
位于中的包装内容span
)
<div>
<button>
<span><!-- using a div also works but is not valid HTML -->
<span>Test</span>
<span>Test</span>
</span>
</button>
<p>
<span>Test</span>
<span>Test</span>
</p>
</div>
调整后的CSS(定位的span
)
button > span, p {
display: flex;
flex-direction: row;
justify-content: center;
}
Flexbox会<button>
阻止内容,但不会建立Flex格式化上下文
用户(Oriol Brufau):
的子级已<button>
被屏蔽,因为它指定了flexbox规范。但是,<button>
似乎建立了一个块格式化上下文而不是一个flex上下文。
用户(Daniel Holbert): 实际上,这是HTML规范所需要的。
几个HTML容器元素是“特殊的”,并且display
在Gecko中有效地忽略了它们的CSS
值(除了它是内联级别还是块级别)。<button>
是其中之一。<fieldset>
&<legend>
也是如此。
添加支持显示:内弯曲/网格和columnset布局<button>
元素
用户(Daniel Holbert):
<button>
不能在纯CSS中实现(由浏览器实现),因此从CSS的角度来看,它们有点黑盒子。这意味着它们不一定以与例如a <div>
。相同的方式做出反应。
_这不是特定于flexbox的-
例如,如果您放置overflow:scroll
按钮,则不会渲染滚动条,如果您放置按钮,则不会渲染为表格display:table
。
向后退一步,这不是特定于的<button>
。考虑<fieldset>
和<table>
具有特殊的渲染行为。
而带点儿怀旧HTML元素,如<button>
与<table>
和<fieldset>
根本不支持自定义display
值,比回答的非常高级的问题的目的,其他的“是该元素的块级或行内”,该元素周围流动等内容。
问题内容: 我正在尝试将-tag的内部元素与flexbox的居中对齐。但是Safari不会将它们居中。我可以将相同的样式应用于任何其他标签,并且可以按预期工作(请参见-tag)。仅按钮左对齐。 尝试使用Firefox或Chrome,您会发现其中的区别。 有什么我必须覆盖的用户代理样式?或对此问题有任何其他解决方案? 问题答案: 问题 在某些浏览器中,除了在和之间切换外,该元素不接受对其值的更改。这
问题内容: 我在其中动态添加了许多内容。我面临的问题是,每当我单独将onTouch侦听器应用于其时,它都会检测到触摸,但是当我向相对布局中添加触摸时,它永远不会响应。 此代码可以很好地检测触摸事件: 但是,当我在myRelativeLayout中添加所有这些TextViews时: 现在,永远不会调用onTouchListener。为什么呢? 问题答案: 导致您的布局,而不是触发触摸事件。尝试删除它
我试图填充一个相对的布局与4卡视图在它。每个cardview由一个图像和一个文本视图组成。我将所有卡片视图包装在一个相对布局中,将相对布局包装在一个滚动视图中。不管用。如果我移除scrollview,它可以正常工作。尝试将scrollview放入相对布局中。但没有工作代码:
WeUI提供了快速的 flex 布局 示例代码 <template> <div class="page"> <div class="page__bd page__bd_spacing"> <div class="weui-flex"> <div class="weui-flex__item"> <div class="placeholde
参考 Flex 布局教程:语法篇
我有一个全屏活动,其中某些布局元素隐藏起来,让位于容器内的一个片段(FrameLayout)。布局如下所示: 片段布局如下所示: 如您所见,在我的片段布局中,我包含了另一个名为input_view的布局。其布局文件如下所示: 这是从以下来源获得的幻灯片面板:https://github.com/mancj/SlideUp-Android,它主要是一个编辑文本视图,在回收器视图项目的单击事件上向上滑