0

示例：http: //jsfiddle.net/nDWRm/4/

我想使用 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 ​</p> 

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

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

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

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

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

4

2 回答 2

1

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

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

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

在 js fiddle 上，基本字体大小为 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
}
​
于 2012-07-26T08:06:19.263 回答
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/

于 2012-07-26T07:23:42.923 回答