使中心对齐文本的边框底部宽度为

Question

我希望我的p文本在其下方具有横跨文本宽度的虚线，我还希望p水平居中。

文本永远不会比一行更长，但它在该行上的长度会有所不同（如果它是完全固定的，我可以轻松解决这个问题）。

我不能完全弄清楚解决方案。我有以下结构：

<div class="container"> 

    <div class="content"> 

     <p>This is the title</p> 

    </div> 

</div> 

在我的CSS，我有这样的事情：

 .container  { 
        width: 650px; 
        height: 100px; 
        } 

    .content { 
        text-align: center; 
        text-transform: uppercase; 
        font-size: 26px; 
        color: #4D4D4D; 
        } 

     p   { 
        border-bottom: #808080; 
        border-bottom-width: thin; 
        border-bottom-style: dotted;    
        } 

Answer 1

这里：http://jsfiddle.net/DqFp7/

HTML

<div class="container"> 

    <div class="content"> 

     <p>This is the title</p> 

    </div> 

</div> 

CSS

.container { 
    width: 650px; 
    height: 100px; 
} 

.content { 
    text-align: center; 
    text-transform: uppercase; 
    font-size: 26px; 
    color: #4D4D4D; 
} 

p { 
    border-bottom: #808080; 
    border-bottom-width: thin; 
    border-bottom-style: dotted; 
    display:inline;  
}​