Question

我想使用css或text或svg创建加号和减号按钮。

我使用css并使用文字+和-符号尝试了此操作，但发现那些从不排队。问题是我可以在100％缩放时看起来相当不错但是当缩放发生变化时，left和top值也需要更改以使div再次居中。我还没有尝试过svg。我只是想知道为什么这似乎不可能。

CSS

#container{
    height: 1.5em;
    width: 1.5em;
    border-radius: 5px;
    border: 0.1em solid black;
    cursor: pointer;    
}

.vert{
    top: 0.25em;
    left: 0.65em;
    position:absolute;
    width: 0.3em;
    height: 1.1em;
    background-color: #424A49;
    display: block;
}

.horz{
    top: 0.65em;
    left: 0.25em;
    position:absolute;
    width: 1.1em;
    height: 0.3em;
    background-color: #424A49;
    display: block;
}

HTML

<div id="container">
  <div class="vert"></div>
  <div class="horz"></div>
</div>

使用单色字体我做了这个小提琴：

http://jsfiddle.net/nDWRm/17/

如果您将#container2的字体大小更改为例如5em，则会看到它无法正确呈现。在美学上，+标志有圆角而-没有，这不是很令人愉快：P。

这个小提琴非常清楚地显示了字体的问题：http://jsfiddle.net/nDWRm/25/

Answer 1

你可以使用像Courier这样的Monotype字体和jQuery中的显示开关来获得你想要的效果。还使用行高和text-align：center;在文本上让这个在多个缩放中工作。内部div使用100％的高度和宽度，因此将始终填充容器。不需要任何位置，您可以增加字体大小以使符号更大：）

CSS：

#container{
    height: 1.5em;
    width: 1.5em;
    border-radius: 5px;
    border: 0.1em solid black;
    cursor: pointer;    
    font-family: Courier;
}

.vert,
.horz{
    margin: 0 auto;
    width: 100%;
    height: 100%;
    color: #424A49;
    text-align: center;
    line-height: 1.5em;
}

.vert
{
    display: none;
}

http://jsfiddle.net/Kyle_Sevenoaks/nDWRm/13/

Answer 2

您不能只使用随机EM值。您必须计算它们才能被浏览器转换为圆形像素值：

http://jsfiddle.net/meo/p7WMW/

（当然你可以不用scss，只需使用http://pxtoem.com/）

在js小提琴上，基本字体大小为16px。因此，您需要这样才能计算您的EM值。

<强> SCSS

$base-font-size: 16px;

@function px2em($px, $contextPXSize : $base-font-size ){
    @return ( $px / $contextPXSize ) * 1em;
}

a {
    position: relative;
    display: block;
    margin: 2em;
    width: px2em(40px); height: px2em(40px);
    background: rgba(0,0,0,.1);
    outline: 1px solid #000;
    &:after, &:before {
        content: "";
        position: absolute;
        background: black;
        left: 50%; top: 50%;   
    }
    &:after {
        height: px2em(30px); width: px2em(4px);
        margin: px2em(-15px) 0 0 px2em(-2px);        
    }
    &:before {
        height: px2em(4px); width: px2em(30px);
        margin: px2em(-2px) 0 0 px2em(-15px); 
    }
    &:hover:after {
        display: none;        
    }
}

会导致什么：

<强> CSS

a{
   position:relative;
   display:block;
   margin:2em;
   width:2.5em; height:2.5em;
   background:rgba(0, 0, 0, .1);
   outline:1px solid #000
}
a:after,a:before{
   content:"";
   position:absolute;
   background:#000;
   left:50%; top:50%
}
a:after{
   height:1.875em;
   width:.25em;
   margin:-.938em 0 0 -.125em
}
a:before{
   height:.25em;
   width:1.875em;
   margin:-.125em 0 0 -.938em
}
a:hover:after{
   display:none
}

不能让非常小的div到中心

2 个答案: