Question

以下html标记会在我的网站中创建一个QA部分。我希望它是这样的 - Q部分中的句子应该与“Q”符号位于同一行; A部分的句子应略微向右移动，每个句子应从新行开始。像这样： desired result http://i44.tinypic.com/i22d5j.png

但是现在它看起来像这样： actual result http://i43.tinypic.com/2afkdpj.png

 <html>
    <head>
    <style type="text/css">

    .qa b {
        font-size: 50px;
    }

    .qa .answer_box {
        margin-left: 90px;
        display: inline;
    }
    .qa p { 
        font-size: 25px;    
    }


    </style>
    </head>
    <div class="qa">
            <div class="question">
                <b>Q</b>
                <p>             
                    Do you believe in SEO?
                </p>
            </div>

            <div class="answer">        
                <b>A</b>    
                <div class="answer_box">                
                    <p>                 
                        Yes I Do
                    </p>
                    <p>
                        SEO is a very powerful technique to increase your site ranking in Google.
                    </p>
                    <p>
                        Also it just cool and so so so.
                    </p>
                </div>
            </div>
        </div>

非常感谢你的帮助。

Answer 1

使用float和padding / margin机动，将b标记替换为strong并放置在第一个p内每个块标记：

p strong {
    float: left;
    margin-left: -1.5em;
    font-size: 3em;
}
p {
    padding-left: 5em;
}

<p>
    <strong>Q:</strong>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non turpis cursus, viverra libero a, ultricies enim. Cras quis ornare urna, condimentum luctus lorem. Aliquam et odio et magna pretium molestie. Fusce pulvinar nisi id mi pharetra scelerisque. Sed mollis accumsan tincidunt. Quisque libero erat, gravida sed rutrum et, volutpat non dui. Etiam eget leo in ipsum consectetur iaculis. Vestibulum dictum leo quis tristique feugiat. Donec vestibulum odio placerat, tincidunt orci vel, sagittis nibh. Integer ultricies ultrices ornare. Duis neque ligula, facilisis sit amet metus eget, adipiscing rhoncus justo. Nam fermentum suscipit mauris, nec volutpat augue condimentum ac. Mauris consequat ante sed lacus vehicula scelerisque. In non gravida ligula, at dapibus ligula.
</p>
<p>
    <strong>A:</strong>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non turpis cursus, viverra libero a, ultricies enim.
</p>
<p>Cras quis ornare urna, condimentum luctus lorem. Aliquam et odio et magna pretium molestie. Fusce pulvinar nisi id mi pharetra scelerisque. Sed mollis accumsan tincidunt. Quisque libero erat, gravida sed rutrum et, volutpat non dui. Etiam eget leo in ipsum consectetur iaculis. Vestibulum dictum leo quis tristique feugiat. Donec vestibulum odio placerat, tincidunt orci vel, sagittis nibh. Integer ultricies ultrices ornare. Duis neque ligula, facilisis sit amet metus eget, adipiscing rhoncus justo. Nam fermentum suscipit mauris, nec volutpat augue condimentum ac. Mauris consequat ante sed lacus vehicula scelerisque. In non gravida ligula, at dapibus ligula.</p>

http://jsfiddle.net/userdude/cZJhU/5/

请注意，您需要使用类来添加这些样式，而不是使用p和p strong等元素级选择器。这仅用于演示目的。

注意

对于那些声称它看起来不像OP要求的人来说，这就是每个浏览器中出现的内容：

Answer 2

我刚刚重写了你的代码，因为我无法处理它 - 这看起来完全符合你的要求：

http://jsfiddle.net/f8NjK/

<div class="wrapper">
<div class="leftcol">
    <strong>Q</strong>
</div>
<div class="rightcol">
    <p>Do you believe in SEO?</p>
</div>
<div class="leftcol">
    <strong>A</strong>
</div>
<div class="rightcol">
    <p>Yes I do</p>
    <p>SEO is a very powerful technique to increase your site ranking in Google.</p>
    <p>Also it just cool and so and so</p>
</div>
</div>

CSS：

  strong {
        font-size: 50px;
    }
    .wrapper {
        width:100%;
    }
   .leftcol {
      width:10%; 
      display:inline-block;

   }
    .rightcol {
        width:80%;
        vertical-align:top;
        display:inline-block;
    }

Answer 3

我放了一个容器。检查这个小提琴现场演示。 http://jsfiddle.net/KdPfz/1/

.container
{
    width: 100%;
    height: 60px;
}

.letter
{
    font-size: 50px;
float: left;

}

.sentence
{
    width: 350px;
    margin-top: 20px;
    margin-left: 20px;
    font-size: 20px;
    float: left;

    z-index: 5;
}

Answer 4

喜欢这个吗？

<html>
<head>
<style type="text/css">

.qa b {
    font-size: 50px;
}

.qa .answer_box {
    margin-left: 90px;
    display: inline;
}
.qa p { 
    font-size: 25px; 
    display: block;
}
.answer_box p {
margin-left: 50px;
}
</style>
</head><body>
<div class="qa">
        <div class="question">
            <b>Q</b> &nbsp; 
            <p style="display: inline-block;">              
                Do you believe in SEO?
            </p>
        </div>
        <div class="answer">        
            <b>A</b>    
            <div class="answer_box">                
                <p style="display: inline-block;">                 
                    Yes I Do
                </p>
                <p>
                    SEO is a very powerful technique to increase your site ranking in  Google.
                </p>
                <p>
                    Also it just cool and so so so.
                </p>
            </div>
        </div>
    </div>

如果你注入一个显示：inline-block;样式进入你的第一个p标签，剩下的就是p标签自然块格式，以及答案块的条件边距。

Answer 5

这可能更符合您的要求 - a fiddle - 我重新编写了您的html以避免使用样式元素

<div class="qa">
    <div class="question">
        <div class="bold-letters">Q</div>
        <div class="questions">
            <p>Do you believe in SEO?</p>
        </div>
    </div>

    <div class="answer">        

        <div class="answer_box">  
            <div class="bold-letters">A</div>
            <div class="answers">
                <p>      

                    Yes I Do
                </p>
                <p>
                    SEO is a very powerful technique to increase your site ranking in Google.
                </p>
                <p>
                    Also it just cool and so so so.
                </p> 

            </div>
        </div>
    </div>

和一些简短的CSS

.bold-letters, .answers, .questions{
    display:inline-block;
}
.bold-letters{
    font-size:50px;
    vertical-align:top;
    margin-right: 30px;
}
.questions{
    vertical-align:bottom;   
}

Answer 6

当我弹出其他答案时，我正在写这篇文章

http://jsfiddle.net/tprats108/ugaYM/

的CSS：

.qa {
    font-size: 25px;
}
.qa .heading {
    font-weight: bold;
    font-size: 50px;
    float: left;
}
.qa .response {
    float: left;
    margin-left: 20px;
}
.clear {
    clear: both;
}

HTML：

<div class="qa">
    <div class="question">
        <div class="heading">Q</div>
        <div class="response">
            <p>Do you believe in SEO?</p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="answer">
        <div class="heading">A</div>
        <div class="response">
            <p>Yes I Do</p>
            <p>SEO is a very powerful technique to increase your site ranking in Google.</p>
            <p>Also it just cool and so so so.</p>
        </div>
    </div>
</div>

如何在同一行上定位文本块

6 个答案: