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

Question

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

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%，并添加box-sizing #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;
}