Question

所以我花了一些时间试图解决这个问题，但我最终转向StackOverflow寻求帮助。我正在尝试使用我的搜索栏并按下按钮以显示在一行上，并且无法执行此操作。

输入的html代码是：

  <nav class="sidebar"> 
  <input type="text"  id="search" placeholder="search">
  <input type="button" name="button" value="Go" class="goButton">
  </nav>

两个输入的CSS如下：

#content .sidebar #search {
    width: calc( 100% - 45px );
    border-radius: 0px;
    height: 42px;
    text-align: center;
    color: #333333;
    font-size: 14px;
    margin-bottom: 21px;
}
/* Go button for search*/
#content .sidebar .goButton {
    position: relative;
    top: -48px;
    width: 45px;
    background-color: #BA2022;
    color: #F3EBDE;
    border-style: none;
    text-transform: uppercase;
    margin-top: 8px;
    border-radius: 0px;
    height: 42px;
    text-align: center;
    font-size: 14px;
    margin-bottom: 21px;
}

有人可以建议修复此问题吗？目前，输入显示如下：

enter image description here

提前致谢。

Answer 1

当文本框稍小并删除按钮的margin-top时，它会对齐：

#content .sidebar #search {
    width: calc( 100% - 60px );
    border-radius: 0px;
    height: 42px;
    text-align: center;
    color: #333333;
    font-size: 14px;
    margin-bottom: 21px;
}
/* Go button for search*/
#content .sidebar .goButton {
    position: relative;
    width: 45px;
    background-color: #BA2022;
    color: #F3EBDE;
    border-style: none;
    text-transform: uppercase;
    margin-top: 8px;
    border-radius: 0px;
    height: 42px;
    text-align: center;
    font-size: 14px;
    margin-bottom: 21px;
}

FIDDLE：http://jsfiddle.net/s0y93L87/

Answer 2

试试这个：

#content .sidebar #search {
    border-radius: 0px;
    height: 42px;
    text-align: center;
    color: #333333;
    font-size: 14px;
    margin-bottom: 21px;
    float: left;
    width: 200px;
}

/* Go button for search*/
#content .sidebar .goButton {
    position: relative;
    top: -48px;
    width: 45px;
    background-color: #BA2022;
    color: #F3EBDE;
    border-style: none;
    text-transform: uppercase;
    border-radius: 0px;
    height: 48px;
    text-align: center;
    font-size: 14px;
    margin-bottom: 21px;
    float: left;
}

Answer 3

将width: calc( 100% - 45px );应用于文本输入并没有为45px宽度按钮留下足够的空间，这有几个原因：

浏览器正在为文本输入添加填充（左右填充+2像素）（至少在Chrome中）
浏览器正在为文本输入添加边框（左右边框为+2像素）（至少在Chrome中）
由于文本输入和按钮不在同一行，因此只有一个空白字符将它们分开，增加了更多的宽度。

为文本输入定义显式填充和边框，以便浏览器无法重置它，并相应地将45px调整为47px（以考虑左右1px边框）：

#content .sidebar #search {
    border:1px solid #aaa;
    padding:0;
    width: calc( 100% - 47px );
}

并删除两个输入之间的空格，方法是将它们放在HTML中的同一行：

<input type="text" id="search" placeholder="search"><input type="button" name="button" value="Go" class="goButton">

我还从top: -48px CSS中删除了.goButton。

使用CSS重置可以帮助消除这种浏览器添加意外样式的问题。

结果：http://jsfiddle.net/k305a0jo/1/

Answer 4

你试过把它放在桌子里吗？像这样的东西：

<nav class="sidebar">
    <table>
        <tr>
            <td class='search'>
                <input type="text" id="search" placeholder="search">
            </td>
            <td class='go'>
                <input type="button" name="button" value="Go" class="goButton">
            </td>
        </tr>
    </table>
</nav>




     .sidebar #search {
     width: calc(100%-45px);
     border-radius: 0px;
     height: 42px;
     text-align: center;
     color: #333333;
     font-size: 14px;
 }
 /* Go button for search*/
 .sidebar .goButton {
     top:-48px;
     background-color: #BA2022;
     width:45px;
     color: #F3EBDE;
     border-style: none;
     text-transform: uppercase;
     border-radius: 0px;
     height: 42px;
     text-align: center;
     font-size: 14px;
 }
 td.search {
 }
 td.go {
 }
 tr {
     width: calc(100%);
     margin-bottom: 21px;
 }

这是一个jsfiddle： http://jsfiddle.net/yzmkxfa7/4/

试图并排获得两个HTML输入

4 个答案: