css - 如何在同一行上放置一个文本块

Question

以下 html 标记在我的站点中创建了一个 QA 部分。我希望它是这样的 - Q 部分中的句子应该与“Q”符号位于同一行；A部分的句子应该稍微向右移动，并且每个句子都应该从新行开始。像这样：

但现在它看起来是这样的：

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

将不胜感激您的帮助。

score 1 · Accepted Answer

使用floatand a padding/margin机动，将b标签替换为 astrong并放置在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请记住，您将希望使用类来添加这些样式，而不是像and之类的元素级选择器p strong。这仅用于演示目的。

笔记

对于那些声称它看起来不像 OP 所要求的那样的人，以下是我使用的每个浏览器中的外观：

在此处输入图像描述

score 1 · Accepted Answer

我只是重写了您的代码，因为我无法处理它 - 这看起来正是您希望的样子：

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;
    }

score 1 · Accepted Answer

我放了一个容器。检查这个小提琴的现场演示。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;
}

score 0 · Accepted Answer

像这样？

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

如果注入 display: inline-block; 将样式放入您的第一个 p 标签中，将其余部分保留为 p 标签自然块格式，以及答案块的条件边距。

score 0 · Accepted Answer

这可能是您正在寻找的更多内容-小提琴-我重新编写了您的 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;   
}

score 0 · Accepted Answer

我正在写这篇文章，而其他答案却出现了

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>

css - 如何在同一行上放置一个文本块

6 回答 6

Related

Reference