html - 如何在单行(行)中显示两个 HTML 输入元素

Question

这段代码

HTML

<input type="text" name="category" id="category" value="">&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="category_1" id="category_1" value="" tabindex="1"></div>

虽然从添加tabindex开始反复努力，但是nbsp到css不能让这两个输入出现在一行。

CSS

<style type="text/css">
    input.category {
      vertical-align:top;
   }
 </style>

更新

我认为有一个插件 css 可以消除这种行为。我已经应用了你们所说的所有内容，这里没有任何作用是 css。我正在使用插件 mcdropdown。这是 code开头只是 style 的副本，后面是 mcdropdown.css 文件的 css 副本粘贴。

请告诉我如何做到这一点。

Answer 1

为输入字段和 css 添加 class="category":

.category {
  float: left;
  display: block;
}

#category_1 {
  margin-left: 20px; /* or space you want..*/
}

并删除那些空格 ( ) 并不是很好的编码方式:)

将元素显示更改为 block 的好处是您可以在需要时为其设置垂直边距和填充。

标签的示例用法可以是:

html:

<div class="col1">
  <label for="field1">Field1 title</label>
  <input type="text" name="field1" id="field1" /> 
</div>

<div class="col2">
  <label for="field2">Field2 title</label>
  <input type="text" name="field2" id="field2" /> 
</div>

<div class="clearfix"></div>

CSS:

.col1 {
  float: left;
  width: 200px;
}

.col2 {
  float: left;
  width: 200px;
}

.clearfix:after {
   content: " ";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}