边界顶部和底部表现得很奇怪

Question

我想在整个元素周围创建一个边框，而不仅仅是元素的实际文本：

  

CSS

.boxcontent .box1 .post-content p .intro {
  text-transform: uppercase;
  color: #b1b1b1;
  font-size: 16px;
  font-family: sans-serif;
  text-align: center;
  border-top: 1px solid #ccc;
  borter-bottom: 1px solid #ccc;
} 

  

HTML

<div class="post-content">
  <p>
    <span>...</span>
  </p>
</div>

Screenshot of Above

我希望我的边界遍布那个文字，我的意思是我想从中间切割那些边框。

Answer 1

边框根据内联元素的处理方式进行操作，这就是.intro元素的作用。如果您只需要一个边框，请将其转换为块级元素。

将display: block;添加到您的.intro定义中。

Answer 2

我不太确定你想要达到的目标，但我认为this正是你所追求的目标？

而不是将impossible to define new type: class not found: org.apache.ivy.osgi.obr.OBRResolver in [] nor Ivy classloader impossible to define glob matcher: org.apache.ivy.plugins.matcher.GlobPatternMatcher was not found. setting 'jline.esc.timeout' to '0' setting 'sbt.ivy.home' to 'D:\software\installed\sbt\.ivy2 -Divy.home=D:\software\installed\sbt\.ivy2' setting 'java.runtime.name' to 'Java(TM) SE Runtime Environment' 和border-top应用于border-bottom，只需将其应用于<span class="intro">标记即可：

Example

<p>