Question

这是定位框的主要代码。我需要将搜索输入与其他部分一起放在任何大小的屏幕上。盒子的输入区域一直移动到屏幕的最右侧，这是一个问题。

.wsite-search {
    position: relative;
    margin-top:78px;
    margin-right:auto;
    margin-bottom:0px;
    margin-left:auto;
}

.wsite-search-input:focus {
    background: #f8f8f8;
    border: 1px solid #000;
}

.wsite-search-input {
    width: 158px;
    height: 19px;
    border: 0;
    padding: 10px 45px 10px 7px !important;
    font-family: 'Oxygen', sans-serif;
    color: #8e8e8e;
    font-size: 17px;
    line-height: 24px;
    background: #fff;
    border: 1px solid #000;
    border-radius: 3px;
    font-weight:300;
}

.wsite-search-button {
    position: absolute;
    width: 18px;
    height: 18px;
    border: 0;
    right: 14px;
    top: 10px;
    background: url(submit-button-v3.png) no-repeat 0px 0px;
}

Answer 1

您是否试图将输入框本身居中，如果是这样，您可以使用边距

将其居中

margin: 0 50%;

http://jsfiddle.net/rlynjb/eyjzhj8s/

如果您想将输入和按钮置于中间位置。你可以将这两个元素包装在div标签中并使用边距：0 50％将这两个元素居中。

使用CSS居中搜索框

1 个答案: