Question

我希望我的搜索框文本字段和提交按钮在同一行。我已经尝试过将其浏览器更改为浏览器。需要帮助。这是我的css：

.search  input[type="text"]{
            width: 70px; height: 25px;
            border: 1px solid #cccccc; 
            font-size: 15;
            margin: 0px -3px 0px 0px;
}
.search  input[type="submit"]{
            background: url(/images/search.png) no-repeat 4 4;
            background-color: white;
            color: black;
            width: 25px;
            height: 25px;
            padding: 0px;
            border: 1px solid #cccccc; 
            font-size: 12;
            margin: 0px 0px 0px 2px;
            border-radius: 0px;
}
.search input[type="submit"], input[type="text"] {
    line-height:normal !important;
}

继承我的html表格

<form method='get' class='search' action='example.php'>
<input type='text' placeholder='Search' name='search' value=''/>
<input type='submit' value=''/>
</form>

Answer 1

您可以简单地添加vertical-align: bottom：

.search input[type="text"] {
  width: 70px;
  height: 25px;
  border: 1px solid #cccccc;
  font-size: 15;
  margin: 0px -3px 0px 0px;
  vertical-align: bottom;/*add vertical align bottom*/
}
.search input[type="submit"] {
  background: url(/images/search.png) no-repeat 4 4;
  background-color: white;
  color: black;
  width: 25px;
  height: 25px;
  padding: 0px;
  border: 1px solid #cccccc;
  font-size: 12;
  margin: 0px 0px 0px 2px;
  border-radius: 0px;
}
.search input[type="submit"],
input[type="text"] {
  line-height: normal !important;
}

<form method='get' class='search' action='example.php'>
  <input type='text' placeholder='Search' name='search' value='' />
  <input type='submit' value='' />
</form>

Answer 2

使用展示：inline-block或浮动：float: left; JSFIDDLE

修正字体大小，在其后添加px

HTML

<form class="search">
    <input type="text" name="search" />
    <input type="submit" value="go" />
</form>

<强> CSS

.search  input[type="text"]{
    width: 70px; height: 25px;
    border: 1px solid #cccccc; 
    font-size: 15px;
    margin: 0px -3px 0px 0px;
}
.search  input[type="submit"]{
    background: url(/images/search.png) no-repeat 4 4;
    background-color: white;
    color: black;
    width: 25px;
    height: 25px;
    padding: 0px;
    border: 1px solid #cccccc; 
    font-size: 12px;
    margin: 0px 0px 0px 2px;
    border-radius: 0px;
}
.search input[type="submit"], input[type="text"] {
    line-height:normal !important;
    display: inline-block;
}

Answer 3

在输入框和搜索按钮周围创建一个div来包装这两个元素。给这个div一个宽度，比如200px。然后，为输入框提供一个左浮动和宽度为50％，并与提交按钮相同。瞧，只要有200px的空间供包装者坐下，他们就会并排坐在一起。

Answer 4

尝试使用内联块：

.search input[type="text"], input[type="text"] {display:inline-block;}

Answer 5

做这样的事。

your-element {
   display: inline-block;
   width: 150px; /* You need a given width */
}

注意：您需要一个给定的宽度，因此单个元素不占用整个宽度。

表单提交按钮和文本字段在同一行

5 个答案: