Question

这是交易。我想在下面添加一个虚线边框，并将其置于段落的父text-align中，而不是仅仅为我的段落加下划线并使用div。这是我的代码不起作用。（它在整个div而不仅仅是段落中添加了边界）

p {
  border-bottom:1px dotted;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

段落似乎占据了父div的宽度。有没有办法将段落的宽度设置为它包含的文本？（似乎margin:auto如果可能的话会起作用。）

Answer 1

段落将扩展到其容器的宽度。为了不这样做，你可以尝试：

p { display: inline-block; }

摆弄示例：http://jsfiddle.net/HuFZL/1/

此外，如果您需要清除其他段落/元素，可能需要将p标记包含在其他div中。

Answer 2

如果您希望段落相互堆叠并从内容中增长，那么您需要的是：

p { 
      display: table;
      margin:auto;
      border-bottom:1px dotted;
}

Answer 3

尝试在段落中添加宽度值，否则段落将填充父容器的整个宽度，边距值将不会执行任何操作：

p {
  border-bottom:1px dotted;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
  width: 100px; /* whatever width you want */
}

Answer 4

这就是我试过的......

<html>

<style>
{
border-bottom:1px dotted;
margin-left:auto;
margin-right:auto;
text-align:center;
}

#custom
{
width : 10px;
}

</style>

<div id="custom"><p>dddd</p></div>

</html>

Answer 5

不，margin auto不会改变段落元素的大小。它只是尝试自动确定元素的自动大小侧面上的适当边距大小。基本上，如果您希望段落小于包含它的div，您可以将段落的静态宽度设置为特定宽度或父元素内部宽度的百分比。如果您不想对段落进行任何静态大小调整，则另一个选项是在父元素上设置填充或在段落上设置静态边距。

div.paragraph-container {
    padding: 20px; /* or padding: 20px 20px 20px 20px; sets all the padding individually (top, right, bottom, left) */
}

如果段落没有边距，这将使所有段落在div内部并且小40px。

div.paragraph-container p {
    margin: 10px 20px; /* sets the margin on the paragraph(s) to 10px on top and bottom and 20px on left and right which does the same as the first example assuming that the div does not have padding. */
}

如果您希望边框正好是文本的宽度，那么：

div.paragraph-container p {
    border-bottom: 1px dotted black;
    padding: 0px 0px 5px 0px;
    margin: 10px 20px;
}

div.paragraph-container {
    padding: 0px;
}

假设文本填充了段落元素，那么这将起作用。如果段落中有2个单词，那么它将不仅仅与文本一样宽。将其拉出的唯一方法是使用内联元素（如span或已设置为display: inline;的元素），但内联元素将并排混乱，除非您在它们之间放置一个块元素

Answer 6

防弹方式

<强> HTML

<div class="container">
 <p><p>
</div>

<强> CSS

.container { text-align:center; }
.container p { 
  display: table;
  margin:0 auto;
  display: inline-block; 
  zoom: 1; 
  *display: inline; 
}

Answer 7

您可以使用span来自动设置宽度。

我想它一定不能是段落？

CSS：

.container {
   width: 100%;
   height: auto;
   background: #ff0000;
   text-align: center;
}

.myText {
   width: auto;
   background: #ffff00;
}

HTML：

<div class="container">
    <span class="myText">Hello</span>
</div>

如何在CSS中自动设置段落宽度？

7 个答案: