Question

正如您在下面的图片中看到的，我有一个长答案文本的调查，每个答案需要几行：

enter image description here

我想要做的是将要对齐的行与每个答案的第一行对齐。这可能吗？

Answer 1

您可以使用CSS中的 display 属性来解决此问题。我将调查分隔符设为一个表格，其中的标签是一个表格单元格，默认情况下将所有文本保留在同一垂直线上。

但是，在这个例子中，每个答案都在它自己的分隔符中，因为我无法强制输入获取显示属性并单独使用它。这应该可以解决这个问题，我相信这有一个简单的解决方法。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>List items in survey</title>
        <style>
            div.survey-answer {
                display: table;
            }

            label {
                display: table-cell;
                padding-left: 10px;
            }
        </style>
    </head>
    <body>
        <div class="survey-answer">
            <input type="checkbox" id="survey-answer-1" /><label for="survey-answer-1"><b>ANSWER 1</b> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sagittis lacinia nulla, eu consequat tellus posuere at. Integer sagittis mauris quis massa tempor bibendum. Proin quam leo, tristique eu nibh non, consequat auctor risus. Pellentesque dignissim at metus a pharetra. Phasellus sit amet metus non arcu sodales hendrerit. Etiam dictum id magna pulvinar laoreet. Mauris sodales sapien non arcu molestie molestie. Proin blandit varius nisi, vel suscipit est tempor quis. Morbi posuere metus sit amet sem ultrices, eget rutrum diam aliquet. Donec vel sem eu turpis convallis aliquam vitae eget justo. Vestibulum vel ornare lacus. Nulla massa massa, tincidunt ac tristique ut, euismod a urna. Nam tincidunt orci at sapien consectetur, non gravida orci bibendum.</label>
        </div>
        <br />
        <div class="survey-answer">
            <input type="checkbox" id="survey-answer-2" /><label for="survey-answer-2"><b>ANSWER 2</b> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sagittis lacinia nulla, eu consequat tellus posuere at. Integer sagittis mauris quis massa tempor bibendum. Proin quam leo, tristique eu nibh non, consequat auctor risus. Pellentesque dignissim at metus a pharetra. Phasellus sit amet metus non arcu sodales hendrerit. Etiam dictum id magna pulvinar laoreet. Mauris sodales sapien non arcu molestie molestie. Proin blandit varius nisi, vel suscipit est tempor quis. Morbi posuere metus sit amet sem ultrices, eget rutrum diam aliquet. Donec vel sem eu turpis convallis aliquam vitae eget justo. Vestibulum vel ornare lacus. Nulla massa massa, tincidunt ac tristique ut, euismod a urna. Nam tincidunt orci at sapien consectetur, non gravida orci bibendum.</label>
        </div>
    </body>
</html>

Demonstration »

希望这能帮到你！

对齐长调查文本以在相同位置开始每一行

1 个答案: