表单元素的绝对位置被忽略

富勒默

我正在尝试对输入元素使用绝对定位。壁虎/眨眼似乎忽略了“正确”样式(应强制使用宽度),而是将默认宽度应用于元素。使用div或span等其他元素不会发生这种情况。

我知道我可以通过添加可以适当放置的其他容器来解决此问题,但是我不必更改标记即可使用CSS。据我从规范中可以看出,这是一个错误,但是一些浏览器似乎是默认的,这是一个不错的错误。

我对规格有什么误解?如何在CSS中解决此问题?

<style>
    .container {
        position: relative;
        height: 100px;
    }

    .container > * {
        background-color: #FAA;
        bottom: 5px;
        left: 5px;
        position: absolute;
        right: 250px;
        top: 5px;
    }
</style>

<!-- this works -->
<div class="container">
    <div>Foo</div>
</div>

<!-- this does not -->
<div class="container">
    <button>Foo</button>
</div>

小提琴:http : //jsfiddle.net/t6o3jajr/4/

注意div和span如何随容器调整大小,但input和button却没有。

吉米·瑞尔(JimmyRare)

我不确定为什么它在某些元素上的行为会有所不同,但是您可以通过替换right: 250px;来解决此问题width: calc(100% - 250px);

小提琴

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

查询元素的绝对位置

来自分类Dev

位置元素内部绝对位置

来自分类Dev

Firefox在表格单元中的绝对位置

来自分类Dev

Elm-元素的绝对位置

来自分类Dev

对齐元素中心,保持绝对位置

来自分类Dev

绝对位置元素未显示

来自分类Dev

浮动元素被绝对位置div裁剪

来自分类Dev

Elm-元素的绝对位置

来自分类Dev

垂直居中,绝对位置,多个元素

来自分类Dev

绝对位置元素上的高度100%

来自分类Dev

基于绝对位置元素的中心移动绝对位置元素

来自分类Dev

固定位置元素位于绝对位置元素内

来自分类Dev

固定位置元素位于绝对位置元素内

来自分类Dev

相对位置/绝对位置并提供绝对坐标的最近祖先元素的名称

来自分类Dev

元素占据具有绝对位置的元素的空间

来自分类Dev

Firefox在表格单元格中的绝对位置

来自分类Dev

绝对位置:负值

来自分类Dev

绝对位置崩溃

来自分类Dev

粘滞标头激活时,绝对位置元素跳出

来自分类Dev

如何使用相对于父元素的绝对位置

来自分类Dev

如何使用绝对位置来定位元素?

来自分类Dev

绝对位置不适用于宽度为%的元素

来自分类Dev

块引用的伪元素中的绝对位置

来自分类Dev

在绝对位置元素上捕获点击事件

来自分类Dev

指定GUI元素在CN1中的绝对位置

来自分类Dev

相对/绝对位置css(转换区域元素的rect坐标)

来自分类Dev

如何从具有绝对位置的元素获取marginLeft?

来自分类Dev

在一个元素上的绝对和相对位置?

来自分类Dev

如何使用相对于父元素的绝对位置