Question

我理解css并且有一个外部文件，但我不知道如何将这个轮询中的所有内容移动到css文件中。民意调查是在div id“poll”下进行的，所以我在css中更改的任何内容都会影响整个民意调查而不是特定部分。我可以将民意调查和答案的问题分成单独的div，还是有更好的方法来重新编写代码？

我知道民意调查仍然有效，但我喜欢有条理，而验证人因此而显示很多错误。

<div id="poll">
<form method="post" action="http://poll.pollcode.com/t78ar8">
    <table>
        <tr>
            <th colspan="2">What game site do you visit most?</th>
        </tr>
        <tr>
            <td>
                <input type="radio" name="answer" value="1" id="t78ar8answer1">
            </td>
            <td>&nbsp;<font face="Tahoma" size="2" color="000000"><label for="t78ar8answer1">Ign</label></font>

            </td>
        </tr>
        <tr>
            <td width="5">
                <input type="radio" name="answer" value="2" id="t78ar8answer2">
            </td>
            <td>&nbsp;
                <label for="t78ar8answer2">GameSpot</label>
            </td>
        </tr>
        <tr>
            <td width="5">
                <input type="radio" name="answer" value="3" id="t78ar8answer3">
            </td>
            <td>&nbsp;<font face="Tahoma" size="2" color="000000"><label for="t78ar8answer3">GameFAQs</label></font>

            </td>
        </tr>
        <tr>
            <td width="5">
                <input type="radio" name="answer" value="4" id="t78ar8answer4">
            </td>
            <td>&nbsp;<font face="Tahoma" size="2" color="000000"><label for="t78ar8answer4">GamerZone</label></font>

            </td>
        </tr>
        <tr>
            <td width="5">
                <input type="radio" name="answer" value="5" id="t78ar8answer5">
            </td>
            <td>&nbsp;<font face="Tahoma" size="2" color="000000"><label for="t78ar8answer5">Mmohut</label></font>

            </td>
        </tr>
        <tr>
            <td colspan="2" height="10">
                <center>
                    <input type="submit" value=" Vote ">&nbsp;&nbsp;
                    <input type="submit" name="view" value=" View ">
                </center>
            </td>
        </tr>
        </a>&nbsp;</font>
        </td>
        </tr>
    </table>
</form>
</div>

这是视觉上的jsfiddle http://jsfiddle.net/qX3Jp/。另外，我知道代码的格式是对的。我这样做是因为它只是一行而且更难阅读。如果需要任何其他信息，请在拒绝我的问题之前询问。感谢

Answer 1

这是jsfiddle，显示了我将如何做到这一点。没有桌子，因为我讨厌桌子并认为他们应该使用的唯一时间是显示数据而不是页面布局。

所有样式也都与标记分开。

对于那些懒得点击链接的人......这是代码。

HTML：

<div id="poll">
    <form method="post" action="http://poll.pollcode.com/t78ar8">

        <h2 id="title">What game site do you visit most?</h2>

        <div id="radio_btns">
            <input type="radio" name="answer" value="1" id="t78ar8answer1">Ign<br />
            <input type="radio" name="answer" value="2" id="t78ar8answer2">GameSpot<br />
            <input type="radio" name="answer" value="3" id="t78ar8answer3">GameFAQs<br />
            <input type="radio" name="answer" value="4" id="t78ar8answer4">GamerZone<br />
            <input type="radio" name="answer" value="5" id="t78ar8answer5">Mmohut
        </div>
        <div id="submit_btns">
            <input type="submit" value=" Vote ">
            <input type="submit" name="view" value=" View ">
        </div>
    </form>
</div>

CSS：

#poll {
    margin: 30px 0px 0px 5px;
    font-family: Tahoma;
}
#radio_btns {
    margin-bottom: 5px;
    font-size: 13px;
}
#radio_btns input {
    margin: 5px 10px 5px 5px;
}
#title {
    margin-bottom: 3px;
    font-size: 13px;
}
#submit_btns {
     margin: 0px 0px 0px 60px;
}

请注意，我将标记分成了几个部分并给了它们ID以使CSS样式更容易。

Answer 2

我填写了表格并删除了我认为不必要的元素：表格+更多。我把字体信息放在body标签中。 CSS中的其他所有内容都与布局相关。

CSS：

* {
    padding:0;
    margin:0;
}
body {
    font-family:Tahoma, Geneva, sans-serif;
    font-size:14px;
    color:#000;
}
label {
    display:block;
}
fieldset {
    border:none;
    text-align:center;
}
legend {
    font-weight:bold;
}

HTML：

<form method="post" action="http://poll.pollcode.com/t78ar8" id="poll">
        <legend>What game site do you visit most?</legend>
        <label for="t78ar8answer1"><input type="radio" name="answer" value="1" id="t78ar8answer1"> Ign</label>
        <label for="t78ar8answer2"><input type="radio" name="answer" value="2" id="t78ar8answer2"> GameSpot</label>
        <label for="t78ar8answer3"><input type="radio" name="answer" value="3" id="t78ar8answer3"> GameFAQs</label>
        <label for="t78ar8answer4"><input type="radio" name="answer" value="4" id="t78ar8answer4"> GamerZone</label>
        <label for="t78ar8answer5"><input type="radio" name="answer" value="5" id="t78ar8answer5"> Mmohut</label>
        <fieldset>
          <input type="submit" value=" Vote ">
          <input type="submit" name="view" value=" View ">
        </fieldset>
    </form>

将HTML代码更改为CSS

2 个答案: