Question

我正在尝试设置我的块引号，以便将它们从常规文本中删除，并使用不同的颜色背景。我发现使它们从常规文本中脱颖而出的最好方法是使用float:right，但是，我不希望将blockquote强制到段落的右侧（理想情况下，我希望它集中在一起）。我是如何实现这种效果的？

要清楚，我希望块引用中的文本保持左对齐。整个形式的blockquote是我想要集中的地方。

jsfiddle

.blockquote {
    width: 75%;
    float: right;
    margin-top:20px;
    margin-bottom: 20px;
    padding: 20px;
    background: #0fddaf;
    background: rgb(15, 221, 175); /* Fall-back for browsers that don't support rgba */
    background: rgba(15, 221, 175, .15);
    font-family: fanwood_italic-webfont;
}

.blockquote p {
    padding: 10px

}

<span class="blockquote">Being good in business is the most fascinating kind of art. Making money is art and working is art and good business is the best art.</span>

Answer 1

为什么不将.blockquote设置为display: block并删除浮动，而不是浮动它？然后你可以使用边距/填充来获得你想要的地方，而不必担心你的内容调整*。

*得多。

Answer 2

将范围更改为div。然后删除float：right，并添加margin：0 auto;

http://jsfiddle.net/ecCCu/3

<div class="blockquote">Being good in business is the most fascinating kind of art. Making money is art and working is art and good business is the best art.</div>

.blockquote {
    width: 75%;
    margin: 0 auto;
    margin-top:20px;
    margin-bottom: 20px;
    padding: 20px;
    background: #0fddaf;
    background: rgb(15, 221, 175); /* Fall-back for browsers that don't support rgba */
    background: rgba(15, 221, 175, .15);
    font-family: fanwood_italic-webfont;
}

Answer 3

也许这就是你想要的：

http://jsfiddle.net/ecCCu/1/

我还添加了text-align: right以防万一，因为你已经提到你希望文本向右移动，而不是整个容器/ blackquote。

编辑我忘记了你有float: right，所以这是另一个没有它的更新：

http://jsfiddle.net/ecCCu/2/

造型blockquote - 必须浮动：正确，但希望blockquote居中

3 个答案: