将内容置于表单内

问题描述 投票:0回答:2

1)如何在窗体内垂直和水平居中显示内容? 2)另外,如何在彼此下面显示单选按钮? 3)我的表格结构正确吗?

<div class="form-calc">
    <form action="" method="post">
        <fieldset>
            <div class="column">
                <div class="labels">
                    <label for="gender"><span>Gender:</span></label>
                </div>
                <label for="gender">
                    <input type="radio" nane="gender" id="gender" value="1">Male
                </label>

                <label for="gender">
                    <input type="radio" name="gender" id="gender" value="2">Female
                </label>

            </div>
            <div class="column">
                <div class="labels">
                    <label for="age">
                        <span>Age:</span>
                    </label>
                </div>
                <input type="number" id="age" name="age">
            </div>

            <div class="column">
                <div class="labels">
                    <label for="weight">
                        <span>Weight:</span>
                    </label>
                </div>
                <input type="number" id="weight" name="weight" placeholder="kg">
            </div>

            <div class="column">

                <div class="labels">
                    <label for="height">
                        <span>Height:</span>
                    </label>
                </div>

                <input type="number" id="height" name="height" placeholder="cm">
            </div>

            <div class="column">
                <div class="labels">
                    <label for="activity">
                        <span>Activity:</span>
                    </label>
                </div>

                <select id="activity" name="activity">
                    <option value="sedentary">Sedentary (office job)</option>
                    <option value="light">Light Exercise(1-2 days/week)</option>
                    <option value="moderate">Moderate Exercise(3-5 days/week)</option>
                    <option value="heavy">Heavy Exercise(6-7 days/week)</option>
                    <option value="athlete">Athlete</option>
                </select>
            </div>

            <p>
                <button>Calculate</button>
            </p>

        </fieldset>
    </form>

</div>

CSS:

.form-calc{
    width: 40%;
    margin: 0 auto;  
    text-align: center;  
}

.column{
    width: 100%;
    display: inline-block;
    margin: 10px 0;
}

.form-calc input,select {
    padding: 10px;
    width: 100px;
  }

  .form-calc input{
    width:10%;
    float:left;
}
.form-calc select{
    width:30%;
    float:left;
}

.form-calc label{
    width:30%;
    float: left;
    line-height: 30px;
  }

  .form-calc button {
    padding: 10px 20px;
    color: white;
  }

这就是它的样子。我相信这是因为浮动物品,但我不知道有任何其他方式来设计它:enter image description here

html css forms
2个回答
0
投票
  1. 您可以使用CSS来居中内容。请参考https://www.w3schools.com/css/css_align.asp
  2. 您可以使用br标签在彼此下方显示单选按钮。请参考https://www.w3schools.com/tags/tag_br.asp
  3. 是的,您的表单结构良好。

0
投票

1)“对齐项目:中心;”也许会帮助你。

2)尝试<br>标签怎么样?

3)您的表格结构合理。

如果您有其他问题或错误,请在下面评论!

© www.soinside.com 2019 - 2024. All rights reserved.