0

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

cssまたはtextまたはsvgを使用してプラスとマイナスのボタンを作成したいと思います。

cssとテキスト+と-記号を使用してこれを試しましたが、それらが一列に並ぶことはありませんでした。問題は、100％ズームでかなり見栄えが良くなることですが、ズームが変更されると、divを再び中央に配置するために値も変更する必要がありますleft。top私はまだ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>​

モノタイプフォントを使用して、このフィドルを作成しました。

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

#container2たとえば、のフォントサイズをに変更すると5em、正しくレンダリングされないことがわかります。そして、審美的なメモでは、+サインは角が丸くなって-いますが、そうではありません。これはあまり満足のいくものではありません：P。

このフィドルは、フォントの問題を非常に明確に示しています：http: //jsfiddle.net/nDWRm/25/

4

2 に答える 2

1

CourierのようなMonotypeフォントとjQueryの表示スイッチを使用して、目的の効果を得ることができます。また、行の高さとテキストの配置を使用します：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 に答える
1

ランダムなEM値だけを使用することはできません。ブラウザで丸いピクセル値に変換するには、それらを計算する必要があります。

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

（もちろん、たとえばhttp://pxtoem.com/を使用するだけで、scssなしでそれを行うことができます）

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 に答える