4

我试图对齐按钮提交和搜索输入，但我不工作，我不明白为什么。我有这个样式代码：

input[type=search] 
    border: none
    cursor: text
    padding: 0
    border: 1px solid #cfcfcf
.search-main input, .search-main button
    height: 30px
    display: inline-block

.search-main button 
    background: #55e0a8
    border: none
    width: 18%
    margin-left: -7px
    display:inline-block

.search-main input
    width: 80%

这个html：

<form method="get" class="search-main">
    <input name="q" type="search">
    <button type="submit"></button>
</form>

这就是我得到的：

在此处输入图像描述 这是在线版本

所以，非常愚蠢的问题，但由于我已经尝试了 40 多分钟，所以我想我会尝试在这里发布。我一直在玩萤火虫，填充，边距，但我不知道问题出在哪里。

4

4 回答 4

4

你可以试试 -

.search-main > button {
float: right;
}

在此处输入图像描述

于 2013-05-15T12:38:56.037 回答
2

添加vertical-align: middle到您的inline-block元素：

.search-main input, .search-main button {
    height: 29px;
    display: inline-block;
    vertical-align: middle;
}
于 2013-05-15T12:40:34.593 回答
1

这很容易，我希望以下代码足以满足您的需求。

.search-main button {
                    background: #55e0a8;
                    border: none;
                    width: 18%;
                    margin-left: -7px;
                    display: inline-block;    //additional code
                    float: left;              //additional code  
                    vertical-align: middle;   //additional code
                    height: 32px;             //additional code 
                    }

这是输入：

<input name="q" type="search" style=" display: inline-block;float: left;">
于 2013-05-15T12:51:16.687 回答
1

height在内联元素上使用时会出现问题。

您可以简单地删除两个元素上的height并替换为：padding

.search-main input, .search-main button {
  padding: 10px 0;
  display: inline-block;
}

.search-main button {
  background: #55e0a8
  border: none
  width: 18%
  margin-left: -7px
  display:inline-block
  padding: 11px 0; // +1px for border on the input
}
于 2013-05-15T12:40:23.247 回答