Question

我有一盒社交媒体内容如下：

 1  |   2   |   3

无论如何要做出“|”比div高度短吗？

Answer 1

您可以使用:after，请参阅此jsfiddle http://jsfiddle.net/mLycophq/2/ 您的管道与div中的文字一样高，或者您可以按font-size更改。

div{
    height:20px;
    background-color:red;
    margin: 0 10px;
    padding: 10px;
    display: inline-block;
}

div:after{
    content: "|";
    color:black;
}

或使用border属性。

div:after{
    content: "";
    color:black;
    border-right:1px solid black;
    font-size: 10px;
}

Answer 2

也许试试这个，Border length smaller than div width?

div {
  width   : 200px;
  height  : 50px;   
  position: relative;
  z-index : 1;
}

div:before {
  content : "";
  position: absolute;
  left    : 0;
  bottom  : 0;
  height  : 50%;;
  width   : your width here  /* or 100px */
  border-bottom:1px solid magenta;
}

Answer 3

执行此操作的一种方法是为line-height

设置一个较小的值

<强> FIDDLE

CSS

li {
    display: inline-block;
    border-right: 1px solid #111;
    padding: 0 8px;
    line-height: 4px; /* <-- here */
}
li:last-child {
    border:none;
}

注意：

1）如果你需要在你的元素上设置一个固定的高度，这将不起作用。

2）从技术上讲，这种方法也会降低元素的高度。但最终效果

实现

是因为文本的字体大小决定了文本的高度而不是行高

Answer 4

如果您使用的是有序或无序列表，那么您只需将ul ol的填充设置为大于li的填充。我是为了类似的问题而这样做的，它对我很有帮助。希望这可以帮助。确保li是你分配边界属性的地方。

无论如何要创建比div高度短的边框？

4 个答案:

CSS