如何更改样式以搜索txt

Question

我正在使用wordpress模板，我的搜索按钮有问题。我的页面上有2个搜索小部件。 1小部件没问题。它的搜索区域为190x25px，长度为240x25像素，工作正常。但第二个小部件是960x25px，但搜索区域也是190x25px。我可以在style.css中更改搜索区域，但如果我更改为900px，则第一个小部件会变得疯狂。我有文字＆＃34; szukaj tutaj＆＃34;这意味着＆＃34;在这里搜索＆＃34;如果我将宽度更改为900px，那么测试将在第一个搜索小部件下进行。

/*------------------------------ SEARCH ------------------------------*/
#s {
    background: none repeat scroll 0 0 transparent;
    border: medium none;
    color: #818181;
    float: left;
    height: 25px;
    line-height: 25px;
    width: 190px;
}

.searchbtn {
    height: 25px;
    margin-right: 0;
    width: 25px;

这是第一个和第二个搜索小部件

Answer 1

您可以使用%根据容器大小调整input。

.searchform .searchtxt {
    width: 90%;
}

当然，90％并不准确。由于div.searchform有两个孩子，input和submit按钮，因此您无法width: 100%使用input。如果您可以根据browser support的需求使用calc()，我建议您更准确地使用以下代码：

.searchform .searchbtn {
    width: 30px; /* I don't know the searchbtn size, look for it in your CSS. */
}

.searchform .searchtxt {
    width: calc(100% - 50px); /* 30px from the .searchbtn size + 20px for input padding (10px each side). */
}