html - 纯CSS表单标签被压缩成小空间

Question

我是 html 的新手，我正在尝试创建一个使用纯(CSS 类型)表单进行政治投票的网站。我遇到的问题是，当页面上显然有空间只占用一行(行)时，它会将问题缩小到一个狭窄的地方，使其使用多行。我尝试告诉表单在页面的特定部分给出问题(标签部分)，并在用户输入答案的框中给出该行的其余部分，但问题(标签)仍然浓缩在一个小空间中。解决此问题的任何帮助表示赞赏。这是我用来尝试实现此目的的代码:

    <form class="pure-form pure-form-aligned" onsubmit="return validateForm()" method="post" name="myForm" action="politicsInsert.php" >
    <fieldset>

    <div class="pure-control-group">
    <label class="pure-input-2-3" for="answerOne">What is your current political affiliation? </label> <input id="answerOne" type="text" name="answerOne">
    </div>
<input class="pure-button pure-button-primary" type="submit" value="Submit data!">
    </fieldset>
</form>

Answer 1

CSS you're linking to中标签的宽度规则导致文本分成多行:

.pure-form-aligned .pure-control-group label {
text-align: right;
display: inline-block;
vertical-align: middle;
width: 10em;
margin: 0 1em 0 0;
}

你可以通过类似的方式覆盖它:

div.pure-control-group label.pure-input-2-3 {
    width:auto;
}

jsFiddle example