0

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

如果我有一个没有延伸到右边距的单行段落，并且我通过在它周围放置边框将它变成了一个文本框，我怎样才能防止该边框一直延伸到右边距？

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

看起来像这样：

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

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

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

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

非常感谢您的帮助。

4

4 回答 4

1

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

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

CSS

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

如果您不想更改 的display值p，则可以使用默认为的其他元素，或者使用内联元素（例如 ）inline将文本包装在 中，然后在其上放置边框。pspan

JSFiddle

于 2013-09-17T21:35:57.403 回答
1

只需display: inline-block;在该元素上使用。+ 应用你的边框。

于 2013-09-17T21:36:11.427 回答
1

尝试这个

<p>
<span style="border: 1px solid black;">This is a test.</span>
</p>
于 2013-09-17T21:36:26.783 回答
1

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

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

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

这里的好处是你不必担心inline-block' 连续跟随对方并且每行可能出现两个或更多。

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

于 2013-09-17T21:45:52.900 回答