Question

编辑：现在看起来像这样：https://jsfiddle.net/vmd7m3yh/5/ 它确实更好，但我需要弄清楚如何正确列出输入..现在有点乱。

我遇到了html / css中的问题。我想做这样的事情：

问题在于我不知道如何以这种方式对齐它们。我试图在输入和复选框上使用float，但是复选框被推回到第一个标签。

现状：

https://jsfiddle.net/vmd7m3yh/

特定div的CSS位于文件的底部。

知道我应该改变什么吗？我很惭愧问关于HTML的问题。拜托，好，:)。

＆＃13;

/*Custom form*/

.workorder-form {
  margin-bottom: 5px;
}

.workorder-form form {
  margin-top: 15px;
  width: 500px;
}

.workorder-form label {
  margin-top: 5px;
}

.workorder-form input[type=text] {
  float: right;
  margin-top: 5px;
}

.workorder-form input[type=checkbox] {
  background-color: yellow;
}

.workorder-form textarea {
  width: 350px;
  height: 200px;
  padding-bottom: 5px;
}

＆＃13;

<div class="workorder-form">
  <form class="workorder-form">
    <h4>@Resources.WorkReport</h4>
    <label>some label</label>
    <input type="text" name="orderNumber" value="" />
    <input type="checkbox" name="vehicle" value="Bike">I have a bike<br />

    <label>some label</label>
    <input type="text" name="phone" value="" />
    <input type="checkbox" name="vehicle" value="Bike">I have a bike<br />

    <label>some label</label>
    <input type="text" name="email" value="" />
    <input type="checkbox" name="vehicle" value="Bike">I have a bike<br />

    <label>some label</label>
    <input type="text" name="email" value="" />
    <input type="checkbox" name="vehicle" value="Bike">I have a bike<br />

    <label>some label</label>
    <input type="text" name="email" value="" />
    <input type="checkbox" name="vehicle" value="Bike">I have a bike<br />

    <label>some label</label>
    <input type="text" name="email" value="" />
    <input type="checkbox" name="vehicle" value="Bike">I have a bike<br />

    <label>some label</label>
    <textarea name="email" value=""></textarea><br />

  </form>
</div>

＆＃13;

编辑：现在看起来像这样：https://jsfiddle.net/vmd7m3yh/5/ 它确实更好，但我需要弄清楚如何正确列出输入..现在有点乱。

Answer 1

你的输入在那个小提琴上太大了，试着添加像

这样的东西

input {
    height: 30px;
}

在你的CSS中

并参见

编辑：你可以在小提琴的左边添加bootstrap作为外部资源，而不是在css框中复制它：）

Answer 2

您可以尝试对此JS小提琴中的HTML / CSS代码所做的更改 - https://jsfiddle.net/39L08e96/

HTML：

<div class="workorder-form">
        <form class="workorder-form">
                <h4>@Resources.WorkReport</h4>
                <label>
                  <span>some label</span>
                  <input type="text" name="orderNumber" value="" />
                  <input type="checkbox" name="vehicle" value="Bike">
                  <span>I have a bike</span>
                </label>

                <br />

                                <label>
                  <span>some label</span>
                  <input type="text" name="orderNumber" value="" />
                  <input type="checkbox" name="vehicle" value="Bike">
                  <span>I have a bike</span>
                </label>

                <br />


                        <label>some label</label><br />
                        <textarea  name="email" value=""></textarea><br />

        </form>
</div>

和css：

  .workorder-form label * {
        float: left;
        margin-top: 5px;
        margin-left: 5px;
    }

     .workorder-form input[type=text] {
        float:left;
        margin-top: 5px;
    }

Answer 3

尝试删除此CSS并查看它是否有帮助。

.workorder-form input[type=text] {
    float:right;
    margin-top: 5px;
}

或者删除float：right

Answer 4

删除：

.workorder-form input [type =“text”] { 向左飘浮;的 (remove) }

Answer 5

我解决了它完全不同的事情。我做了1个div，在div里面插入了2个新的div。所以我有复选框和跨度在另一个标签然后表格。问题解决了:)

html文本输入和复选框。 css问题

5 个答案: