Question

我已按照floating-div-over-an-image的说明操作，虽然工作正常但我正在尝试更好地控制搜索框和按钮的行为。您可以看到我正在处理的页面here

右上角的标题图片上有一个搜索框。搜索框div的CSS如下

.search-box{
    z-index: 500;
    width: 50%;
    border: 0px none;
    top: 0px;
    float: right;
    left: 40%;
    position: absolute !important;
}

您会看到搜索框右侧有一个搜索按钮。当浏览器窗口变窄时，即使右侧有空间，该搜索按钮也会跳到下方。我试图强迫该按钮保持在右侧。

有关如何实现我描述的行为的任何提示？我在上面的CSS中尝试了float属性的变体，但这并没有让我得到我需要的东西。也许我没有应用正确的CSS选择器？

此致

Answer 1

只需更改属性.search-box

的width:100% css即可

工作

.search-box {
width:100%;
}

让我知道它是否有用

Answer 2

在类（.search-box）中，宽度为40％，因此没有足够的空间让搜索框和按钮显示在行中。你只需要替换下面的css，它将在所有分辨率下工作。

public function toDo()
    {
        $user = $this->getUser();
         .....
        return ['user' => $user];
    }

Answer 3

#k2ModuleBox125 div的宽度为40％，这会导致搜索按钮在搜索栏大小增加时换行到下一行。

您可以通过查看#k2ModuleBox125 div。

的样式规则轻松解决此问题

Answer 4

这种情况正在发生，因为.search-box的宽度为％，给它最小宽度，并将它放在右边而不是左边，你应该没问题。

.search-box {
        最小宽度：XXpx;
        右：0;
        左：自动;
    }

将div放在图像上 - 如何控制浮动行为

4 个答案: