Question

我有以下数据：

 .container{
float: left;
width: 200px;
height: 50px;
}

.sub{
display: inline-block;
width: 100px;
height: 50px;
}

 <div class="container">
<form>
   <input name="id" value="${someValue}" type="hidden"/>
   <label id="error"></label>
   <input type="text" class="sub"  name="amount" value="1" id="amount">
</form>
<button type="submit" name="sudmitButton" class="btn btn-lg btn-default sub" onclick="someFunction()">Submit form</button>
</div>

我需要在左边对齐显示“amount”和“sudmitButton”元素，但是现在我看到这些块在彼此之下，看起来我已经错过了什么。

Answer 1

只需在表单上添加float:left

即可

Answer 2

您将容器设置为200px的宽度，该宽度不足以包含两个元素。使容器更宽，并将按钮放在表单元素中。

或者将容器放宽（或完全删除该约束）并将表单浮动到左侧。

Answer 3

您也可以这样做，在表单中包含按钮：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title> Webpage</title>
    <style>
    .container{
    float: left;
    width: 200px;
    height: 50px;

    }


    .sub{
    display: inline;
    width: 100px;
    height: 30px;

    }

    </style>
  </head>
  <body>
    <div class="container">

        <form>
          <input name="id" value="${someValue}" type="hidden"/>
          <label id="error"></label>
          <input type="text" class="sub"  name="amount" value="1" id="amount">
          <button type="submit" name="sudmitButton" class="button_1" onclick="someFunction()" >Submit form  </button>
        </form>

    </div>
  </body>
</html>

将html元素内联

3 个答案: