Question

我正在尝试调查问卷，我希望它的布局像

第一个问题回答是/否？........................................ ...............是/否

第二个问题是一个可笑的长问题，可能........是/否

跨越多行，所以我需要它很好地回答是/否？

第三个问题回答是/否？........................................ ..............是/否

所以我希望每个问题跨越页面的宽度，屏幕左侧有问题，屏幕右侧排列是/否单选按钮。如果问题很长，我希望问题跨越多行，但仍然在右上角的单选按钮上。

我还希望在调整窗口大小时可以很好地扩展。

我对css并不是很好，所以我没有太多运气让它发挥作用。

我有一个小提琴：

https://jsfiddle.net/p35t4kj7/

但是对你来说这并不是很好，你会看到。

有人可以在这里提供一些帮助，也许可以教我浮标或者其他方式吗？

此外，radiobuttons实际上是在我的结果中切换位置。

此外，甚至还不确定我的标记在语义标记方面是否很好。欢迎任何建议。

<section>
            <span>First question answer yes/no?</span>
            <label><input type="radio" value="true" />Yes</label>
            <label><input type="radio" value="false" />No</label>
            <span>Second question is a ridiculously long question which might span multiple lines so I need it to wrap nicely answer yes/no?</span>
            <label><input type="radio" value="true" />Yes</label>
            <label><input type="radio" value="false" />No</label>
            <span>Third question answer yes/no?</span>
            <label><input type="radio" value="true" />Yes</label>
            <label><input type="radio" value="false" />No</label>
</section>

Answer 1

以下是如何获得您描述的布局：

从您的跨度中移除float: left; - 它们已经左对齐。
将您的跨度更改为div--否则，浏览器会将所有内容放在一条连续线上。
按照您希望它们出现在屏幕上的相反顺序排列每个问题的元素（漂浮物有点滑稽）。
在每个问题的第一个浮动元素上设置clear: right;（这将是屏幕上最右边的元素）。
在输入元素上设置vertical-align: top;，以便单选按钮标签与问题文本正确对齐。

以下是fiddle的更新。

以下是代码：

label {
    float: right;
    clear: right;
}
label + label {clear: none;}
input {vertical-align: top;}

<section>
    <label><input type="radio" value="false" />No</label>
    <label><input type="radio" value="true" />Yes</label>
    <div>First question answer yes/no?</div>
    <label><input type="radio" value="false" />No</label>
    <label><input type="radio" value="true" />Yes</label>
    <div>Second question is a ridiculously long question which might span multiple lines so I need it to wrap nicely answer yes/no?</div>
    <label><input type="radio" value="false" />No</label>
    <label><input type="radio" value="true" />Yes</label>
    <div>Third question answer yes/no?</div>
</section>

Answer 2

您在此处有一份调查问卷可以关注您使用bootstrap和css它们是非常顶级的

您是否了解在整个提议贷款期限内您应该为借款人还款，您是否愿意这样做？

        <div class="col-xs-2">
          <div class="checkbox">
            <!-- ngRepeat: input in question.inputs -->
            <label class="checkbox-inline ng-binding ng-scope" ng-repeat="input in question.inputs">
              <input type="checkbox" ng-checked="question.value===input.value" ng-true-value="Yes" ng-false-value="' '" name="" ng-model="question.value" class="ng-pristine ng-valid"> Yes
            </label>
            <!-- end ngRepeat: input in question.inputs -->
            <label class="checkbox-inline ng-binding ng-scope" ng-repeat="input in question.inputs">
              <input type="checkbox" ng-checked="question.value===input.value" ng-true-value="No" ng-false-value="' '" name="" ng-model="question.value" class="ng-pristine ng-valid"> No
            </label>
            <!-- end ngRepeat: input in question.inputs -->
          </div>
          <input type="hidden" name="/Application/QuestionSegment/Questionnaire[Identifier='1097796619440']/Question[@Code='ServicingGuarantee2']/@Response" value="">
        </div>

一个例子

http://codepen.io/Rabes/pen/JYwNwd

基本问卷输入如何向左侧设置问题，向右侧设置收音机

2 个答案: