Question

我网站的链接是http://www.tutorialboy.com。我在搜索框中遇到问题。每当我以150％或更高的速度放大时，搜索框就会失去位置。我正在使用二十一个主题。我只是在其中定制了一些东西。我只是希望搜索框保持原样，就像我不放大时一样。我是整个网页设计的新手，所以如果我在这个网站上做错了什么，请原谅我。如果您需要任何额外的细节，请发表评论＆amp;我会和你一起找到它们。请访问我的网站＆amp;看看你是否能解决我的问题。这些是我定制的样式规则：

input#s {
    background: url(images/search.png) no-repeat 5px 6px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    font-size: 14px;
    height: 22px;
    line-height: 1.2em;
    padding: 4px 10px 4px 28px;
    text-align: center;
}

#branding #searchform {
    position: absolute;
    top: 169px;
    right: 0px;
    text-align: right;
    background-color: #f9f9f9;
    color:#ffffff;
    border: 10px solid #000;
}


#branding #s {
    float: right;
    -webkit-transition-duration: 400ms;
    -webkit-transition-property: width, background;
    -webkit-transition-timing-function: ease;
    -moz-transition-duration: 400ms;
    -moz-transition-property: width, background;
    -moz-transition-timing-function: ease;
    -o-transition-duration: 400ms;
    -o-transition-property: width, background;
    -o-transition-timing-function: ease;
    width: 940px;
}

#branding #s:focus {
    background-color: #f9f9f9;
    width: 940px;
}

Answer 1

您只需要将表单宽度设置为100％，然后添加大小调整#branding #searchform，然后添加CSS属性box-sizing:border-box;。这将确保它包含100％的填充和边距，而不是出血。

#branding #searchform {
position: absolute;
top: 169px;
right: 0px;
text-align: right;
background-color: #f9f9f9;
color:#ffffff;
border: 10px solid #000;
width: 100%;
box-sizing: border-box;
}

WordPress搜索表单不会在缩放时调整大小

1 个答案: