Question

（这是关于CSS / HTML的问题。）

如果我的单行段落没有延伸到右边缘并且我通过在其周围放置边框将其转换为文本框，那么如何保持该边框不会一直延伸到右边缘？

<p style="border: 1px solid black;">
This is a test.
</p>

看起来像这样：

+-----------------------------------------------------------------------------+
| This is a test.                                                             |
+-----------------------------------------------------------------------------+

当我希望它看起来像这样（我不必猜测硬编码 margin-right ）：

+-----------------+
| This is a test. |
+-----------------+

我当然是在这里讲话，从左到右的方向（所以，不是希伯来语或阿拉伯语）。

非常感谢你的帮助。

Answer 1

你可以尝试这个（警告：在IE7上不起作用）：

<p id='yourPara'>
    This is a test.
</p>

CSS

#yourPara {
    border: 1px solid black;
    display: inline-block;
}

如果您不想更改display的{{1}}值，请使用默认为p的其他元素或将文本换行inline使用内联元素（例如p）并将边框放在其上。

JSFiddle

Answer 2

只需在该元素上使用display: inline-block;即可。 +申请你的边界。

Answer 3

试试这个

<p>
<span style="border: 1px solid black;">This is a test.</span>
</p>

Answer 4

我要做的是浮动段落然后清除它们：

p.neatBox {
    float: left;
    clear: both;
    padding: 5px;
    border: 1px solid blue;
}

例如参见：http://jsfiddle.net/audetwebdesign/8GbkJ/

这里的优势在于您不必担心inline-block会相继跟随并且每行可能出现两个或更多。

唯一需要注意的是边距不会在浮动元素上崩溃，因此您需要设置上边距或下边距来控制段间间距。

如何引入带边框的段落的右边距

4 个答案:

JSFiddle