Question

我目前正在努力完成一项小练习。我试图对齐我的文本输入和我的选择输入框，但我似乎无法弄清楚如何将选择列表与输入框对齐。我尝试过使用标签和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>

css文件：

body { background: white }
h1 { font-family: Arial, Helvetica, Sans-Serif;
     font-size: 18pt; color: black; font-weight: bold; }
h2 { font-family: Arial, Helvetica, Sans-Serif;
     font-size: 16pt; color: black; font-weight: bold; }
p { font-family: Arial, Helvetica, Sans-Serif;
    font-size: 12pt; color: black; font-weight: bold; }
p.alert { font-style: italic; color: red; }
table { font-family: Arial, Helvetica, Sans-Serif;
    font-size: 12pt; color: black; }
td.center { text-align: center; }
select { font-family: Arial, Helvetica, Sans-Serif;
         font-size: 10pt; font-weight:  bold; color: blue;
         background: lightBlue; }
option { font-family: Arial, Helvetica, Sans-Serif;
         font-size: 10pt; color: black; background: silver; }

Thx伙计们！

Answer 1

我建议你学会正确使用桌子。表不是独立的元素，有一些必需的子元素。例如

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

首先回顾一下表的工作方式，然后您会发现这更容易。 http://www.w3schools.com/html/html_tables.asp

Answer 2

你走了：

使用此HTML结构：将标签/ p元素放在第二列的第一列，input和select元素上。

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

Fiddle

Answer 3

据我所知 - 在这个日期......这就是我如何标记这个表格。我只把id和'=“放在第一个输入上。我希望这有助于你更好地理解。这是a fiddle - （更改浏览器窗口以查看表单如何调整屏幕大小）

HTML

<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>

CSS

*, *: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 */

对齐所有类型的html输入

3 个答案:

HTML

CSS