Question

我只是新学习HTML表单元素。如何正确推送输入并选择左侧的元素？我将我的元素对齐到左self.loggedInUser = (0, "Hanna", "hash", "UID")并将我的文本对齐到右float: right但它没有向左推。

代码：

align-text: left

所以我用<div id="container"> <div class="addBooks"> <h1>Add Books</h1> <hr> <form action="#"> <fieldset> <label for="bookname">Book Name:</label> <input type="text" id="bookname" name="bookname"> <br /> <label for="category">Category:</label> <select name="category"> <option value="value1">Value 1</option> </select> <br /> <label for="author">Author:</label> <select name="author"> <option value="value2">Value 2</option> </select> </fieldset> </form> </div> </div>包裹div class = "addBooks"。

的CSS：

div id = "container

我打算把我的元素推到左中左边。谢谢你的帮助！

Answer 1

您不需要使用float: right;来执行此操作，但您可以使用margin-left代替：

.addBooks input
{
    width: 150px;
    text-align: left;
    margin-left: 200px
}

.addBooks select
{
    text-align: left;
    margin-left: 200px
}

See this fiddle

Answer 2

这是你的问题..你的div是800px而你使用150px的标签..现在你的div上剩下650px ..你将input设置为150px并说{{1这将在剩余的650px中将输入拉到右侧。

解决方法是不向您的输入添加浮动规则并选择标记，默认情况下您将获得所需的输出。

Answer 3

可能答案[未经测试]

<div id="container">
  <div class="addBooks">
    <h1>Add Books</h1>
    <hr>
    <form action="#">
      <fieldset>
        <label for="bookname">Book Name:</label>
        <input type="text" id="bookname" name="bookname">
        <br />
        <label for="category">Category:</label>
        <select name="category">
          <option value="value1">Value 1</option>
        </select>
        <br />
        <label for="author">Author:</label>
        <select name="author">
          <option value="value2">Value 2</option>
        </select>
      </fieldset>
    </form>
  </div><!--- end of addBooks --->
</div><!--- end of container --->

所以我用div class = "addBooks"包裹div id = "container。

<强>的CSS：

.addBooks {
  clear: both;
  width: 800px;
  margin: 0 auto;
  margin-top: 10%;
  text-align: center;
  text-align:centre;
}
.addBooks label {
  float: left;
  width: 150px;
  text-align: right;
}
.addBooks input {
  float: left;
  width: 150px;
  text-align: left;
}
.addBooks select {
  float: left;
  text-align: left;
  width:150px;
}

Answer 4

虽然@Vincent提供了一个解决方案，但我想向您介绍一种更好的方法来管理您的DOM结构：flexbox。

多年来我在http://codepen.io/bddenhartog/pen/bdRwqp

做了一个例子

通过左侧推送元素将无法正常工作

4 个答案: