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..*/
}

并删除那些空格（ ）不是很好的编码方式：）

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

标签的使用示例可能是：

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;
}

Answer 2

要让它们在一行显示，请使用css display属性将其显示更改为内联，这是我的工作方式：

<html>
<head>
    <style>
        #category, #category_1{
            display: inline;
        }
    </style>
</head>
<body>
    <input type="text" name="category" id="category" value="">
    <input type="text" name="category_1" id="category_1" value="" tabindex="1">

</body>

这应该可以解决你的问题而且非常简单！祝你有美好的一天！

Answer 3

它们都是内联元素，默认情况下应该出现在同一行。正确关闭输入代码(<input... />)并删除结束</div>代码：

变化

<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>

到

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

Answer 4

你可以尝试这个吗？默认情况下，你的元素在一行中对齐和显示。如果您想应用任何CSS样式或css属性，那么您可以使用如下所示。在输入元素class="category"

中添加了类

CSS：

<style type="text/css">
    input.category {
       float:left;
          width:100px;
   }
 </style>

HTML：

<div style='width:500px;'>
    <input type="text" name="category" id="category" value="" class="category">
    <input type="text" name="category_1" id="category_1" value="" class="category" tabindex="1">
</div>

Answer 5

您可以通过删除float来添加display:inline-block。这里：http://jsfiddle.net/xW3tt/2/

Answer 6

这个答案是一个疯狂的猜测操作，试试

尝试在CSS下方应用覆盖：

input.category {
      float:left !important;
      margin: 0 !important;
      padding:0 !important;
      clear:none !important;
   }

并将.category课程应用于您的input（*查看FIDDLE）

FIDDLE DEMO

如何在单行（行）中显示两个HTML输入元素

6 个答案: