如何在CSS中获得加号矩形？

Question

我正试图在红色

中实现这个加号的矩形

我用css

尝试了

＆＃13;

＆＃13;

<p align="left">
  Lorem ipsum dolor sit amet, consectetur
  adipiscing elit, sed do eiusmod tempor
  incididunt 
  <span style="color:red; margin-left:47px; border: 1px solid red;">
    +
  </span>
</p>

＆＃13;

＆＃13;

＆＃13;

它的显示如下：

我无法理解为什么加号的顶部和底部有空格。

如何在正确的矩形中获得加号？

Answer 1

请尝试以下操作： Demo

CSS：

p:after{
    content:"+";
    margin:0 0 0 47px !important;
    color:red;
    border: 1px solid red;
    height:8px;
    width:8px;
    line-height:8px;    
    display: inline-block;
    font-size:12px;
    vertical-align:middle;
}

HTML：

<p align="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>

Answer 2

试试这个

span.plus {
  display: inline-block;
  border: 1px solid red;
  font-size: 9px;
  height: 9px;
  width: 9px;
  vertical-align: middle;
  text-align: center;
  color: red;
}

<span class="plus">+
  </span>

Answer 3

试试这个：

HTML：

<span class="plus">+</span>

CSS：

.plus
{
display:inline-block;
width:auto;
height:auto;
line-height:10px;
padding:1px;
border:1px solid red;
color:red;

}

Answer 4

实际上在HTML文档中，每一行都有特定的行高，这里的情况也是如此，你在这里看到的额外高度实际上是最小行高。

您需要向line-height添加span，因此会覆盖p

中的行高

例如：

line-height:10px; 

检查DEMO

Answer 5

只需使用⊞字符，就可以在没有（很多）CSS的情况下完成：

＆＃13;

＆＃13;

<p align="left">
  Lorem ipsum dolor sit amet, consectetur
  adipiscing elit, sed do eiusmod tempor
  incididunt 
  <span style="color: red; margin-left: 47px;" >&#x229E;</span>
</p>

＆＃13;

＆＃13;

＆＃13;

Answer 6

试试这样：

HTML：

<p> some content</p>

CSS：

p:after{
  content:"+";
  margin:0 0 0 47px !important;
  color:red;
  border: 1px solid red;
  height:8px;
  width:8px;
  line-height:8px;    
  display: inline-block;
  font-size:12px;
  vertical-align:middle;

}