Question

我想知道我是否可以在搜索输入中放置一个提交按钮，在右侧。我尝试使用float：但是没有用。

Codepen：http://codepen.io/celicoo/pen/XbKYyY

HTML：

<section class="search">
  <div class="search__container">
    <div class="search__row">
      <div class="col-lg-12">
        <div class="search__box">
          <h2 class="search__title">Procurando por: Nome de ...</h2>
          <form class="search__form" action="#" method="get">
            <input class="search__input" type="text" placeholder="Busque um Crawler.." />
            <button class="search__submit" type="submit">Procurar</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

CSS：

.search {
  color: #676a6c;
  margin-top: 25px;
  &__row {
    margin-left: -15px;
    margin-right: -15px;
    overflow: hidden;
  }
  &__box {
    background: #FFFFFF;
    padding: 10px;
  }
  &__form {
    margin-top: 10px;
  }
  &__input {
    background-color: #FFFFFF;
    background-image: none;
    border: 1px solid #e5e6e7;
    border-radius: 1px;
    color: inherit;
    display: block;
    padding: 12px;
    width: 100%;
    font-size: 14px;
    outline: none;
  }
  &__input:focus {
    border: 1px solid #E97228;
  }
  &__submit {
    background-color: #E97228;
    border-color: #E97228;
    color: #FFFFFF;
    border: 1px solid transparent;
    outline: none;
  }
}

我试图像我说的那样使用浮动，但是没有工作，浮动只会将提交按钮推到右边，但不会在输入内部。

Answer 1

.search__input的输入宽度为100％，因此实际上没有任何东西可以用于它。

您需要使宽度小于100％并添加float：left;

示例：

.search__input{width:50%; float:left;}

Answer 2

我假设您正在尝试提交按钮＆＃39;在＆＃39;输入......或重叠它。

您需要围绕输入创建换行div并使用position: relative;提交，然后为提交按钮提供position: absolute;以及顶部和右侧值。

Answer 3

我添加了display：inline＆amp;已将搜索栏放在容器中。试试这个css：

＆＃13;

.search {
  color: #676a6c;
  margin-top: 25px;

  &__row {
    margin-left: -15px;
    margin-right: -15px;
    overflow: hidden;
  }
  &__box {
    background: #FFFFFF;
    padding: 10px;
  }
  &__form {
    margin-top: 10px;
  }
  &__input {
    background-color: #FFFFFF;
    background-image: none;
    border: 1px solid #e5e6e7;
    border-radius: 1px;
    color: inherit;
    display: block;
    padding: 12px;
    width: 50%;
    font-size: 14px;
    outline: none;
    display: inline;
    margin:0px;
  }
  &__input:focus {
    border: 1px solid #E97228;
  }
  &__submit {
    background-color: #E97228;
    border-color: #E97228;
    color: #FFFFFF;
    border: 1px solid transparent;
    outline: none;
    padding: 12px;
    margin:0px;
  }
  &__container {
    width: 250px;
  }
}

＆＃13;

如何在搜索输入旁边设置提交按钮

3 个答案: