内联元素的边框答案

【问题标题】：Border for elements which are inline内联元素的边框
【发布时间】：2015-12-29 01:56:07
【问题描述】：

我必须为 div 元素应用边框。由于 div 元素是内联的，所以边框是重叠的。

预期输出：

<span class="label_no" title="Label Editing not allowed">1.</span>
<div class="Heading">Heading Text Goes Here.....Heading Text Goes Here.....Heading Text Goes Here.....</div>

需要标签和标题应该在同一行，并且单独标题的边框。

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

你可以试试这个：

      .Heading{
    font-family: Georgia,"New Century Schoolbook",serif;
    font-size: 1.4em;
    letter-spacing: 0.02em;
    line-height: 1em;
    display:inline;
    border:1px solid green;
    margin: 0;
    padding: 5px;
    position:fixed;
    top:0px;
}
.label_no{
    font-size: 1.5em;
    color:red;
}
}

DEMO

或者

再举一个例子：

DEMO

【讨论】：

谢谢，但我还有一个案例。当有多个 div 元素时，这将不起作用。小提琴：jsfiddle.net/7g8zh90o/7
好吧，等一下先生@MohanaPriyaG_SPS

【解决方案2】：

使用此方法添加float:left 为label 和display:table 为文本 - 通过设置display:table 占用可用空间

.Heading {
  font-family: Georgia, "New Century Schoolbook", serif;
  font-size: 1.4em;
  letter-spacing: 0.02em;
  line-height: 1em;
  display: table;
  border: 1px solid green;
  margin: 0.5em 0;
  padding-top: 5px;
}
.label_no {
  font-size: 1.5em;
  color: red;
  float: left;
}

<span class="label_no" title="Label Editing not allowed">1.</span>

<div class="Heading">Heading Text Goes Here.....Heading Text Goes Here.....Heading Text Goes Here.....</div>
<span class="label_no" title="Label Editing not allowed">1.</span>

<div class="Heading">Heading Text Goes Here.....Heading Text Goes Here.....Heading Text Goes Here.....</div>
<span class="label_no" title="Label Editing not allowed">1.</span>

<div class="Heading">Heading Text Goes Here.....Heading Text Goes Here.....Heading Text Goes Here.....</div>

【讨论】：

【解决方案3】：

您需要在 span 元素上使用浮动，例如，

.label_no{
    font-size: 1.5em;
    color:red;
    float:left;    
}

.Heading{
    font-family: Georgia,"New Century Schoolbook",serif;
    font-size: 1.4em;
    letter-spacing: 0.02em;
    line-height: 1em;
    display:inline;
    border:1px solid green;
    margin: 0.5em 0;
    padding-top: 5px;
}
.label_no{
    font-size: 1.5em;
    color:red;
    float:left;    
}

<span class="label_no" title="Label Editing not allowed">1.</span>
<div class="Heading">Heading Text Goes Here.....Heading Text Goes Here.....Heading Text Goes Here.....</div>

【讨论】：