我正在为FAQS页面使用定义列表，我喜欢它的语义。我有一个跨度，其唯一内容是A:，我希望答案文本不要环绕跨度。我只能让它换行或跳到新行。我尝试尝试使用标记，但这只会变得混乱（我相信这可以清除很多）。我也尝试绝对定位它，但我无法弄清楚如何在<dd>标签内做到这一点。
这是我到目前为止所拥有的http://jsfiddle.net/nhHma/1/
这是标记：
<dl>
<dt class="faqQ">How much wood could...?<span class="show_answer"></span></dt>
<dd class="faqA"><p><span class="answer_icon">A:</span><span class="answer_text_one">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></p></dd>
<dt class="faqQ">What is the average airspeed...?<span class="expand"></span></dt>
<dd class="faqA"><span class="answer_icon">A:</span><span class="answer_text_two">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></dd>
</dl>
dt {
font: normal 1em 'Droid Serif', "Lucida Grande", Lucida, Arial, Verdana, sans-serif;
font-weight: light;
padding: 0;
margin-top: .5em;
display: inline-flex;
clear: both;
}
dd {
font: italic 1em 'PT Sans', 'Helvetica Neue', "Helvetica", sans-serif;
color: darken(@mid_gray_color, 25%);
padding-left: 1em;
margin: .15em 0 1em 1em;
display: block;
.answer_icon {
display: inline-block;
font: italic normal 2em Times, serif;
float: left;
margin-right: .3em;
}
.answer_text_two {
float: left;
}
}
谢谢！
编辑：对不起，我想我的解释不是很清楚。我希望文本位于A:的右侧，但我希望它全部左对齐，而不是在A:下面换行。这有意义吗？
喜欢这个：
A: Lorem ipsum dolor sit amet, consectetur adipisicing elit....
Placeat, esse, saepe, voluptas molestiae ex laborum ducimus cumque accusantium recusandae unde dicta sed assumenda quasi aspernatur nobis consectetur culpa aperiam perspiciatis!
不是这样的：
A: Lorem ipsum dolor sit amet, consectetur adipisicing elit....
Placeat, esse, saepe, voluptas molestiae ex laborum ducimus cumque accusantium recusandae unde dicta sed assumenda quasi aspernatur nobis consectetur culpa aperiam perspiciatis!
你的意思是这样的吗？
<dl>
<dt class="faqQ">How much wood could...?<span class="expand"></span></dt>
<dd class="faqA"><p><span class="answer_icon">A:</span><span class="answer_text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></p></dd>
<dt class="faqQ">What is the average airspeed...?<span class="expand"></span></dt>
<dd class="faqA"><span class="answer_icon">A:</span><span class="answer_text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></dd>
</dl>
dt {
font: normal 1em 'Droid Serif', "Lucida Grande", Lucida, Arial, Verdana, sans-serif;
font-weight: light;
padding: 0;
margin-top: .5em;
display: inline-flex;
clear: both;
&:after {
content:'bb';
margin-left: .5em;
color: darken(@mid_gray_color, 25%);
}
}
dd {
font: italic 1em 'PT Sans', 'Helvetica Neue', "Helvetica", sans-serif;
color: darken(@mid_gray_color, 25%);
padding-left: 1em;
margin: .15em 0 1em 1em;
/* border-left: 3px solid @mid_gray_color; */
display: block;
.answer_icon {
display: inline-block;
font: italic normal 2em Times, serif;
float: left;
margin-right: .3em;
}
.answer_text {
float: left;
display:inline-block;
width:400px;
text-align:justify;
padding-top:10px;
}
}
http://jsfiddle.net/nucleo1985/nhHma/18/
希望这是你要找的。
尝试将其添加到jsfiddle中的.answer_text_two：（我不担心.answer_text_one）
.answer_text_two {
float: right;
width: 410px;
margin: 5px 0;
}
边距和指定的宽度只是为了让它在 jsfiddle 中看起来不错，可以根据您在实际页面上想要的大小进行更改，但你明白我的意思。