Question

在我的html中，我有两个输入标签，我希望它们在同一条线上，在我搜索并尝试更多代码之后。

它没有改变任何东西，我的代码有什么问题？

<div class="form-group">
    <label class="col-lg-3 control-label">Meaning:</label>
    <div class="col-lg-8">
        <div class="">
            <div class="lnw">
                <span class="inline">
                <input class="form-control" type="text" name="meaning[]" id="meaning " style="float: right">
                <input type="image" src="/images/pjdict/plus.png" alt="Submit" width="48" height="48" class="add_field_button">
                </span>
                <br>
            </div>
        </div>
    </div>
</div>

Answer 1

您为输入提供了一些宽度[＆＃34; type =＆＃34; text＆＃34;]或输入[＆＃34; type =＆＃34; image＆＃34;]如下所示：

否则你在表单控件类中使用cad自定义类，并将此类添加到.form-control

请参阅Bootply link

.form-control {
  float: left !important;
  width: 90%;
}
.add_field_button {
  float: right;
  text-align: center;
  width: 10%;
}

Answer 2

您的代码中不需要float:right表单可以简单地放置

<input type="text"> <input type="text">

并且它们会在彼此旁边出现，你也应该始终把类型放在第一位

Answer 3

只需使用display：inline-block to input of input tags

即可

<html>
  <body><div class="form-group">
    <label class="col-lg-3 control-label">Meaning:</label>
    <div class="col-lg-8">
        <div class="">
            <div class="lnw">
                <span class="inline" style="display:inline-block"> //inline-block added here
                <input class="form-control" type="text" name="meaning[]" id="meaning " style="float: right">
                <input type="image" src="/images/pjdict/plus.png" alt="Submit" width="48" height="48" class="add_field_button">
                </span>
                <br>
            </div>
        </div>
    </div>
</div>
  </body>
</html>

Answer 4

请使用以下代码。

＆＃13;

.inline  input[type="text"] {
float:left;
margin:10px 10px 0px 0px;
}

＆＃13;

<div class="form-group">
    <label class="col-lg-3 control-label">Meaning:</label>
    <div class="col-lg-8">
        <div class="">
            <div class="lnw">
                <span class="inline">
                <input class="form-control" type="text" name="meaning[]" id="meaning " >
                <input type="image" src="/images/pjdict/plus.png" alt="Submit" width="48" height="48" class="add_field_button">
                </span>
                <br>
            </div>
        </div>
    </div>
</div>

＆＃13;

Answer 5

您正在将输入字段的类型设置为“image”，根据this page，它在引导程序中无效，并且通常对html无效。我只能猜测你想要做什么，但从事情的方式来看，你想要：

文字输入字段
文本输入字段右侧的提交按钮
图片而非常规提交按钮外观

如果这是准确的，请查看以下代码段：

#formElementContainer {
  margin-top: 60px; /* this is only important for display within this snippet */
}

#formElementContainer input[type='text'] {
  width: calc(100% - 50px);
}

#formElementContainer input[type='submit'] {
  background: transparent url('https://www.gravatar.com/avatar/eb603bf5dd01c06880fdb8e4e1d04df3?s=32&d=identicon&r=PG&f=1') center center no-repeat;
  border: none;
  width: 32px;
  height: 32px;
}

<div id="formElementContainer">
  <input type="text" />
  <input type="submit" value="" />
</div>

同一行中的html标签不起作用

5 个答案: