13

我在几个仅在左侧的 DIV 上有一个边框。

CSS：

#Mid-Content_ {

    position: absolute;
    left: 510px;
    top: 119px;
    height: 70%;
    border-left: #CCC 2px solid;
    width: 250px;
    padding-left: 10px;
}

边框从左侧的顶部到底部，这正是根据 CSS 代码应该做的。

有没有办法让它更短，比如从顶部和底部10px？问题是 DIV 内的文本需要与此边界线内联。

4

3 回答 3

18

看看这个小提琴

HTML

<div id="contentArea">
         <div id="border"></div>
         text text text text text text text text text text
</div>

CSS

   #contentArea {
     height: 100px;
     width: 80px;
     position: relative;
     background: #3beadc;
     padding:5px;
     }

   #border  {
     border-left: 2px solid #f51c40;
     position: absolute;
     top: 10px;
     bottom: 10px
     left:0px;
   }

如果您希望边框位于 contentArea 之外，请将其左侧值更改为负*border width* 例如left:-2px;在上述情况下

于 2013-11-14T14:49:26.577 回答
3

在@SW4 的答案的基础上，您还可以使用伪元素，然后您不必更改 html：

HTML

    <div id="contentArea">
     text text text text text text text text text text
    </div>

CSS

  #Mid-Content_ {
    position: relative;
    width: 250px;
    padding-left: 10px;
  }

  #Mid-Content_:after {
   content: "";
   border-left: #CCC 2px solid;
   position: absolute;
   top: 10px;
   bottom: 10px;
   left: 0px;
  }
于 2018-07-29T13:37:48.313 回答
2

不，边框将始终延伸元素的整个长度或宽度（例如内容+填充，但不是边距）。但是，您始终可以将文本包含div在p标签中，无论如何这在语义上都是正确的，然后将边框添加到其中：

#Mid-Content_ p {
    padding: 0;
    border-left: 2px solid #CCC;
}

此外，div无论如何，边框上的边框应该与文本内联（或者如果您没有在 div 上设置显式高度），假设您有一个正常的，line-height并且 div 上没有顶部或底部填充.

于 2013-11-14T14:50:25.703 回答