Question

小提琴here

CSS代码：

#searchbox-container {
    width: 100%;
    height: 80px;
    clear: both;
}

.searchbox {
    width: 100%;
    margin-left:2.5%;
    margin-right: 2.5%;
}

.searchbox input {
    width: 250px;
    height: 18px;
    -webkit-border-radius: 20;
    -moz-border-radius: 20;
    border-radius: 20px;
    padding: 10px 20px 10px 20px;
    border: 1px solid #16a085;
}

.searchbox input:hover {
    width: 250px;
    height: 18px;
    -webkit-border-radius: 20;
    -moz-border-radius: 20;
    border-radius: 20px;
    padding: 10px 20px 10px 20px;
    border: 1px solid #e67e22;
}

/*  SECTIONS  */
.section-search {
    clear: both;
    padding: 0px;
    margin: 0px;
}

/*  COLUMN SETUP  */
.col-search {
    display: block;
    float:left;
    margin: 1% 0 1% 5%;
}
.col-search:first-child { margin-left: 0; }

/*  GROUPING  */
.group-search:before,
.group-search:after {
    content:"";
    display:table;
}
.group-search:after {
    clear:both;
}
.group-search {
    zoom:1; /* For IE 6/7 */
}   

.btn-search {
  -webkit-border-radius: 25;
  -moz-border-radius: 25;
  border-radius: 25px;
  -webkit-box-shadow: 0px 0px 0px #666666;
  -moz-box-shadow: 0px 0px 0px #666666;
  box-shadow: 0px 0px 0px #666666;
  color: #ffffff;
  font-size: 16px;
  background: #16a085;
  padding: 10px 40px 10px 40px;
  text-decoration: none;
}

.btn-search:hover {
  background: #1abc9c;
  text-decoration: none;
}
/*  GRID OF THREE  */
.search-span_3_of_3 {
    width: 100%;
}
.search-span_2_of_3 {
    width: 65%;
}
.search-span_1_of_3 {
    width: 30%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
    .col-search { 
        margin: 2% 0 2% 0%;
    }
}

@media only screen and (max-width: 480px) {
    .search-span_3_of_3 {
        width: 100%; 
    }
    .search-span_2_of_3 {
        width: 100%; 
    }
    .search-span_1_of_3 {
        width: 100%;
    }
}

HTML代码：

<div id="searchbox-container">
    <div class="searchbox">
        <center>
            <form>
                <div class="section-search group-search">
            <div class="col-search search-span_1_of_3">
                <input name="city" type="text" placeholder="City" />
            </div>
            <div class="col-search search-span_1_of_3">
                <input name="category" type="text" placeholder="Category" />
            </div>
            <div class="col-search search-span_1_of_3">
                <a class="btn-search" href="#">Search</a>
            </div>
            </div>
            </form>
        </center>
    </div>
</div>

问题定义：

请访问此内容以了解当前情况“http://jsfiddle.net/Hq6UL/” 1.当屏幕分辨率降低时，我遇到了两个文本框重叠的问题。 2.搜索按钮未与文本框对齐。他们都需要在同一个水平平原。 3.目前当我将鼠标悬停在文本框上时，颜色会变为橙色，但应该像我点击框一样，即使y鼠标从悬停中移出，边框的颜色仍应保持橙色，直到我在里面输入盒子。一旦我完成打字，我转到另一个文本框，前一个框边框应该变为绿色，第二个框是绿色边框，当我现在输入它时应该变成橙色。 4.我希望有关于如何使文本框更具吸引力的提示，同时考虑平面设计风格。

请帮助!!!

问候!!!

Answer 1

你的主要问题来自于 DIV默认为阻止显示，而A（锚）默认为内联显示。

因此，首先通过添加“display：block;”将A转到阻止显示。到你的“.btn-search”课程。

然后，你会注意到它的高度只有38px而另一个高度是40px。因为你有顶级＆amp;底部填充10px，只需添加“高度：20px”即可将同一A的高度固定为20px;到你的“.btn-search”课程。

我在JSFiddle中进行了更新，它可以根据需要运行： http://jsfiddle.net/Hq6UL/2/

.btn-search {
  -webkit-border-radius: 25;
  -moz-border-radius: 25;
  border-radius: 25px;
  -webkit-box-shadow: 0px 0px 0px #666666;
  -moz-box-shadow: 0px 0px 0px #666666;
  box-shadow: 0px 0px 0px #666666;
  color: #ffffff;
  font-size: 16px;
  background: #16a085;
  padding: 10px 40px 10px 40px;
  text-decoration: none;
  display: block;
  height: 20px;
}

我还添加了这段代码，以便在输入字段具有焦点时保持颜色：

.searchbox input:focus {
    width: 250px;
    height: 18px;
    -webkit-border-radius: 20;
    -moz-border-radius: 20;
    border-radius: 20px;
    padding: 10px 20px 10px 20px;
    border: 1px solid #e67e22;
}

Answer 2

在CSS中使用此代码：

/*  GO FULL WIDTH AT LESS THAN 850 PIXELS */

@media only screen and (max-width: 850px) {
    .col-search { 
        margin: 2% 0 2% 0%;
    }
}

@media only screen and (max-width: 850px) {
    .search-span_3_of_3 {
        width: 100%; 
    }
    .search-span_2_of_3 {
        width: 100%; 
    }
    .search-span_1_of_3 {
        width: 100%;
    }
}

编辑:: 有关垂直对齐的问题：

<a class="btn-search" href="#" style="vertical-align: -10px;">Search</a>

对齐文本框和按钮（CSS）

问题定义：

2 个答案: