0

我的网站的链接是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;
}
4

1 回答 1

0

你所要做的就是让表单宽度为 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;
}
于 2013-07-26T02:01:38.097 回答