Question

我有这段代码：

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title> </title>
        <style>
            .name {
                width: 130px;
            }
        </style>
    </head>

    <body>
          <h1> Test </h1>

        <form>
                <fieldset class="name">
                    <label for="firstName">Name</label> <input type="text" name="firstName" id="firstName" required> <br /> <br/>
                    <label for="last_name">Surname</label> <input type="text" name="last_name" id="last_name" required> <br /> <br/>
                </fieldset>
                <br />

                <p>
                    <label for="textarea"> Free text </label> <textarea name="box_with_sizecss_and_placeholder" placeholder="Please type" id="textarea"></textarea>
                </p>

                <p class="range">
                    <label for="ran">Rank</label><br />
                        Easy <input type="range" id="ran" name="ran" min="1" max="8" step="1" /> Hard
                </p>


                <p>
                    <input type="submit">
                </p>
        </form>
    </body>

</html>

我想让自由文本和排名位于字段集名称旁边（带有一些空格），按钮位于页面中间。

我怎样才能让它发挥作用？

对于前面的代码，我想让这部分成为字段集的旁边：

  <p>
                    <label for="textarea"> Free text </label> <textarea name="box_with_sizecss_and_placeholder" placeholder="Please type" id="textarea"></textarea>
                </p>

                <p class="range">
                    <label for="ran">Rank</label><br />
                        Easy <input type="range" id="ran" name="ran" min="1" max="8" step="1" /> Hard
                </p>

提交按钮位于页面中间。

提前谢谢。

Answer 1

我通过一些搜索很容易做到这一点，例如＆＃34;将两个div放在一起＃34;和＃34;以div为中心＆＃34;。

http://pastebin.com/SLQfGpQC

漂浮在html页面中

1 个答案: