html - 定义列表常见问题解答 - 避免在 标记中将文本环绕在图标周围

Question

我正在为 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!

Answer 1

你是说这样吗？ :

<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/

希望这就是您要找的。