2014-02-25 17 views
1

每一行,你可以在圖片中看到下面我有很長的答案文字的調查需要幾個行每個答案:對齊長期調查文本開始在同一位置

enter image description here

我想要做的是將行對齊與每個答案的第一行對齊。那可能嗎?

+0

否HTML/CSS?我們無法診斷我們看不到的東西。 –

回答

1

您可以使用CSS中的顯示屬性來解決此問題。我在調查分區中創建了一個表格,裏面的標籤是一個表格單元格,默認情況下所有文本都保持在同一垂直線上。

但是,在這個例子中,每個答案都在它自己的分隔符中,因爲我無法強制輸入獲取顯示屬性並單獨使用它。這應該做的伎倆,我相信有一個簡單的解決方法,或不。

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

希望這有助於你出去!

相關問題