对齐所有类型的html输入_Html_Css_Input_Alignment

对齐所有类型的html输入

html css input

对齐所有类型的html输入,html,css,input,alignment,Html,Css,Input,Alignment,我现在正在努力完成我做的一个小练习。我试图将文本输入和选择输入框对齐，但我似乎不知道如何将选择列表与输入框对齐。我曾尝试使用标签、css和表格，但不知何故，我的表单最终分散在彼此之间。非常感谢您的帮助： <!DOCTYPE html> <html> <head> <title>Game Intro</title> <link rel="stylesheet" type="text/css" href="http://localho

我现在正在努力完成我做的一个小练习。我试图将文本输入和选择输入框对齐，但我似乎不知道如何将选择列表与输入框对齐。我曾尝试使用标签、css和表格，但不知何故，我的表单最终分散在彼此之间。非常感谢您的帮助：

<!DOCTYPE html>
<html>
<head>
<title>Game Intro</title>
<link rel="stylesheet" type="text/css" href="http://localhost/webtech/sample.css"
</head>
<body>
<h1>Character Creation</h1>
<h2>You have 10 Gold Pieces</h2>
<ul>
    <li>1 gold piece buys 10 health tokens</li>
    <li>1 gold piece buys 2 experience tokens</li>
    <li>1 gold piece buys 10 supply tokens</li>
</ul>
<form action="gameIntro.php" method="post">
    <table>
    <p>Enter your character's name:
    <input type="text" size="20" name="character_name" /></p>
    <p>Select your character class:
    <select name="character_class">
        <option>Dwarf</option>
        <option>Human</option>
        <option>Elf</option>
        <option>Wizard</option>
    </select>
    </p>
    <p>Purchase health tokens:
    <select name="health_token">
        <option>0</option>
        <option>10</option>
        <option>20</option>
        <option>30</option>
    </select>
    </p>
    <p>Purchase experience tokens:
    <select name="experience_token">
        <option>0</option>
        <option>2</option>
        <option>4</option>
        <option>6</option>
        <option>8</option>
        <option>10</option>
    </select>
    </p>
    <p>Purchase supply tokens:
    <select name="supply_token">
        <option>0</option>
        <option>25</option>
        <option>50</option>
        <option>75</option>
        <option>100</option>
    </select>
    </p>
    <p><input type="submit" value="Submit your Character" />
    <input type="reset" value="Reset your Character" /></p>
    </table>
    </form>
    <a href={"http://localhost/index.html"}>Go back to Homepage</a>
    </body>
    </html>

伙计们

我建议你学会正确使用桌子。表不是独立的元素，存在某些必需的子元素。比如说

<table>
  <tr>
    <td>Name: </td>
    <td><input type="text" name="name" /></td>
  </tr>
</table>


姓名：

首先回顾一下表是如何工作的，您会发现这要容易得多。给你：

使用这种HTML结构：将标签/p元素放在第一列，

input

和

select

元素放在第二列

<tr>
    <td></td>
    <td></td>
</tr>

据我所知，目前。。。这就是我在这张表格上做标记的方式。我只在第一次输入中输入id和for=“”。我希望这有助于你更好地理解。以下是-（更改浏览器窗口以查看窗体如何根据屏幕大小进行调整）

HTML

首先，你不需要一遍又一遍地写那些css规则。你只需将字体系列放在

正文{font-family:arial}

中，它就会“层叠”到“样式”表中——除了“表格数据”，我不会使用任何表格。我认为应该完全删除表，并修改样式表以修复布局。样式现在只定义字体-与布局无关。这就是（主要）为什么他的表格看起来乱七八糟的原因。@sheriffderek，表格是表格数据的完美例子。但是，即使您不同意，在没有表格的情况下对齐表单也过于复杂，表格仍然是最好、最简单、最简单的解决方案。我花了很多时间设计响应表单，但我不能说表格是最简单的。。。但我明白你是从数据的角度来看的。我喜欢把表单标记为列表。。。这是一个输入字段列表。不是一个属性表。

<tr>
    <td></td>
    <td></td>
</tr>

<form action="gameIntro.php" method="post" class="character-form">
    <ul>
        <li>
            <label for="input-name">Enter your character's name:</label>
            <input id="input-name" type="text" size="20" name="character_name" />
        </li>

        <li>
            <label>Select your character class:</label>
            <select name="character_class">
                <option>Dwarf</option>
                <option>Human</option>
                <option>Elf</option>
                <option>Wizard</option>
            </select>
        </li>

        <li>
            <label>Purchase health tokens:</label>
            <select name="health_token">
                <option>0</option>
                <option>10</option>
                <option>20</option>
                <option>30</option>
            </select>
        </li>

        <li>
            <label>Purchase experience tokens:</label>
            <select name="experience_token">
                <option>0</option>
                <option>2</option>
                <option>4</option>
                <option>6</option>
                <option>8</option>
                <option>10</option>
            </select>
       </li>

        <li>
            <label>Purchase supply tokens:</label>
            <select name="supply_token">
                <option>0</option>
                <option>25</option>
                <option>50</option>
                <option>75</option>
                <option>100</option>
            </select>
        </li>

    </ul>

    <input type="submit" value="Submit your Character" />
    <input type="reset" value="Reset your Character" />

</form>

*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    /* look it up */
}

.character-form {
    border: 1px solid red;
    overflow: hidden; /* should be a clearfix */
}

.character-form ul {
    width: 100%;
    float: left;
    list-style: none;
    margin: 0; padding: 0;
}

.character-form li {
    width: 100%;
    float: left;
    margin-bottom: 1em;
    border: 1px solid blue;
}

.character-form li label {
    border: 1px solid orange;
}

.character-form li input, .character-form li select {
    border: 1px solid green;
    width: 100%;
    display: block;
    float: left;
    float: left;
}

@media (min-width:20em) {

    .character-form {
        max-width: 30em;
        margin-right: auto;
        margin-left: auto;
    }    

    .character-form li label {
        float: none;
        width: auto;
        vertical-align: middle;
        display: inline-block;
        min-width: 15em;
    }

    .character-form li input, .character-form li select {
        float: none;
        width: auto;
        display: inline-block;
        vertical-align: middle;
    }

    .character-form li input {
        width: 100%;
        max-width: 20em;
    }

    .character-form li select {
        min-width: 12em;
    }

} /* end break-point */