Question

我对表单的html布局有一个恼人的问题。我无法真正改变一般设置，因为它是一个巨大框架的一部分。但我必须将一个按钮“移动”到一个更合适的位置。我很接近，但到目前为止对解决方案并不满意。也许你可以在这里给我一些想法。这是一个显着简化的版本，用于演示我的方法：

我有两个容器div，顶部和底部。顶部容器在左侧显示一个按钮。该按钮是固定的，但由于其标签的转换，可以具有不同的宽度。底部容器装有很多东西。其中顶部的第二个按钮工作正常，但看起来不对。我想光学地将它移动到顶部容器中，因为那里有按钮的逻辑连接。当然，真正把它放在那里将是正确的解决方案，但我目前不能这样做。相反，我使用固定位置，除水平放置外，它的工作正常。我必须决定从左侧推出多远来放置按钮，这样它肯定不会与容器中的第一个按钮重叠。我显然必须考虑所有翻译，结果有效，但根据第一个按钮标签，我在两个按钮之间有一个恼人的水平间隙。

我尝试在第二个按钮上使用伪元素（:: before）来帮助布局。因为在渲染视图时，我显然有第一个按钮的翻译标签，我可以将其复制到第二个按钮的某个属性中，并在我的css中使用该属性来填充第二个按钮的前伪元素，其长度与第一个按钮。这就是下面发布的代码示例中显示的内容。

我完全没有做的就是放置那个伪元素，使其保留在顶部容器中（因此恰好位于第一个按钮下方）。这个想法是间接地放置第二个按钮。看起来这显然是不可能的。但由于我是标记和样式的血腥初学者，我认为这里值得问一下......

下面是一些极其简化的代码，用于演示我的方法。

我为你创建一个jsfiddle。这是代码：

HTML：

<div id="top-container">
    <button>multilingual button text</button>
</div>

<div id="bottom-container">
    <h2>
        Some title opening the bottom container
        <span class="into-top-container">
            <button id="place-me" reference-text="multilingual button text">button to be placed</button>
        </span>
    </h2>
    <p>Some content</p>
    <p>Some content</p>
    <p>Some content</p>
</div>

CSS：

body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
div {
    margin: 0;
    padding: 5px;
}
button {
    margin: 0;
    padding: 5px;
    white-space: nowrap;
}


div#top-container {
    width: 100%;
    border: 1px solid green;
}

div#bottom-container {
    width: 100%;
    border: 1px solid blue;
}

#place-me {
    position: fixed;
    top: 0;
    left: 400px;
    margin: 5px;
    background: yellow;
}

#place-me::before {
    z-index: 0;
  /*visibility: hidden;*/
    position: absolute;
    content: attr(reference-text);
    margin: 0 5px;
    padding: 0;
    background: gold;
    right: 100%;
}

注意：

在上面的代码中，第二个按钮放在left: 400px;。这或多或少是我想要改变的。但显然left: 0不正确......
当前已将用于伪元素的可见性css规则注释掉以用于演示目的
请记住，第二个按钮*不包含在顶部容器中，但实际上在逻辑上低于底部容器的标题。目标是将其光学地移动到顶部容器中，该容器已经接近我想要的位置。除了水平对齐...

根据要求，这里有截图：

它取自我上面发布的小提琴。我添加了红色椭圆，它显示了我想要移动的元素对，左箭头指示了我想要移动的位置。我想把它移动到那么远，两个测试“多语言按钮文本”完全放在彼此的顶部，但没有明显指定一个明确的左侧位置。这就是伪元素存在的原因：作为虚拟占位符。然后我会隐藏那个伪元素，并将第二个按钮放在第一个按钮的正上方，无论翻译文本有多长。

所以最后的结果应该是这样的：

Answer 1

好的，我投入了更多的时间，因为在我们的代码回归之后这个问题再次出现，我发现，经常在允许一些时间过后，这是一个逻辑且相对干净的解决方案：

我使用相同的精简代码进行演示。

jsfiddle基于问题本身提供的内容。

HTML：除了reference-text从按钮移动到容器之外没有真正的变化，原因如下：

CSS：

* {
    font-size: 12px;
    font-weight: normal;
    font-family: Arial;
}

body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-size: 12px;
    font-weight: normal;
}
span,
div {
    margin: 0;
    padding: 5px;
}
button {
    margin: 0;
    padding: 5px;
    white-space: nowrap;
}


div#top-container {
    width: 100%;
    border: 1px solid green;
}

div#bottom-container {
    width: 100%;
    border: 1px solid blue;
}

span.into-top-container {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    border: 1px solid transparent;
}

span.into-top-container::before {
    visibility: hidden;
    content: attr(reference-text);
    position: relative;
    margin-right: 5px;
    padding: 5px;
    border: 2px solid;
    background: gold;
}

#place-me {
    background: yellow;
    pointer-events: all;
}

战略的基本变化：持有要放置的按钮的容器必须以固定的方式定位，而不是按钮本身（所以<span class="into-top-container">）！这允许使用伪前元素，现在也锚定到该容器而不是按钮，以获取所需的空间而不实际获得按钮本身的一部分。

由于该容器现在位于原始多语言按钮上，因此不再可以点击该按钮。该问题由容器的pointer-events设置为none并再次为放置按钮设置为all来解决。这使得容器本身只是忽略所有事件（点击）并将它们传递给下面的原始按钮。

我必须确保伪元素中使用的字体样式与原始多语言按钮完全相同。这实际上是有道理的，因为字体样式定义了该按钮使用的实际宽度，因此伪元素使用的实际宽度应以完全相同的方式定义。在上面的例子中，我强制通过简单地将所有元素字体样式规则设置为一些固定值（CSS代码中的初始* {...}）。显然，这也可以在伪元素本身的css规则内完成。我在这里选择了更简单和粗暴的变体来保持代码清洁。

固定元素的位置，但在元素

1 个答案: