CSSアイテムが左に移動できない

Question

margin-right: 200pxを使用してCSSエレメントを右に移動しようとすると、移動しません。ただし、margin-left: 200pxは移動します。示すように、私のCSSファイルには、次のとおりです。

 .wrapper { 
 
     display: inline-block; 
 
     position: absolute; 
 
     top: 50%; 
 
     left: 50%; 
 
     width: 200px; 
 
     margin-right: 200px; 
 
     } 
 
    
 
     
 
     .btc { 
 
     font-family: 'Open Sans', sans-serif; 
 
     padding: 0.75em 2em; 
 
     text-align: center; 
 
     text-decoration: none; 
 
     text-indent: 500px; 
 
     color: #FFAA48; 
 
     border: 2px solid #FFAA48; 
 
     font-size: 24px; 
 
     display: inline; 
 
     border-radius: 0.3em; 
 
     -webkit-transition: all 0.2s ease-in-out; 
 
     transition: all 0.2s ease-in-out; 
 
     position: relative; 
 
     overflow: hidden; 
 
     background-image: url(https://bitcoin.org/img/icons/opengraph.png); 
 
     background-repeat: no-repeat; 
 
     background-position: center left 11px; 
 
     background-size: 30px 30px; 
 
     } 
 
     .btc:hover { 
 
     background-color: #FFAA48; 
 
     color: #fff; 
 
     border-bottom: 4px solid #FFAA48; 
 
     }

<div class="wrapper"> 
 
     <a id='btc' class='btc' title='Bitcoin Current Price (USD)'>Loading...</a> 
 
    </div>

任意の助けをいただければ幸いです！

Answer 1

身体を相対人物に変更し、それを修正する権利を使用しました。絶対divで

body { 
 
    position:relative; 
 
} 
 
.wrapper { 
 
    display: inline-block; 
 
    position: absolute; 
 
    margin-top:20%; 
 
    right:0; 
 
    width: 200px; 
 
    margin-right: 200px; 
 
    } 
 

 

 
    .btc { 
 
    font-family: 'Open Sans', sans-serif; 
 
    padding: 0.75em 2em; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    text-indent: 500px; 
 
    color: #FFAA48; 
 
    border: 2px solid #FFAA48; 
 
    font-size: 24px; 
 
    display: inline; 
 
    border-radius: 0.3em; 
 
    -webkit-transition: all 0.2s ease-in-out; 
 
    transition: all 0.2s ease-in-out; 
 
    position: relative; 
 
    overflow: hidden; 
 
    background-image: url(https://bitcoin.org/img/icons/opengraph.png); 
 
    background-repeat: no-repeat; 
 
    background-position: center left 11px; 
 
    background-size: 30px 30px; 
 
    } 
 
    .btc:hover { 
 
    background-color: #FFAA48; 
 
    color: #fff; 
 
    border-bottom: 4px solid #FFAA48; 
 
    }

<div class="wrapper"> 
 
     <a id='btc' class='btc' title='Bitcoin Current Price (USD)'>Loading...</a> 
 
     </div>

Answer 2

、あなたはmargin-rightと一緒にrightを使用する必要がある、またはあなただけrightの代わりmargin-rightを使用することができます。あなたの場合、margin-rightを削除してleftを削除し、rightのみを使用しました。

.wrapper { 
 
     display: inline-block; 
 
     position: absolute; 
 
     top: 50%; 
 
     width: 200px; 
 
     right: 200px; 
 
     } 
 
    
 
     
 
     .btc { 
 
     font-family: 'Open Sans', sans-serif; 
 
     padding: 0.75em 2em; 
 
     text-align: center; 
 
     text-decoration: none; 
 
     text-indent: 500px; 
 
     color: #FFAA48; 
 
     border: 2px solid #FFAA48; 
 
     font-size: 24px; 
 
     display: inline; 
 
     border-radius: 0.3em; 
 
     -webkit-transition: all 0.2s ease-in-out; 
 
     transition: all 0.2s ease-in-out; 
 
     position: relative; 
 
     overflow: hidden; 
 
     background-image: url(https://bitcoin.org/img/icons/opengraph.png); 
 
     background-repeat: no-repeat; 
 
     background-position: center left 11px; 
 
     background-size: 30px 30px; 
 
     } 
 
     .btc:hover { 
 
     background-color: #FFAA48; 
 
     color: #fff; 
 
     border-bottom: 4px solid #FFAA48; 
 
     }

<div class="wrapper"> 
 
    <a id='btc' class='btc' title='Bitcoin Current Price (USD)'>Loading...</a> 
 
</div>

Answer 3

.wrapper { 
    display: inline-block; 
    position: absolute; 
    top: 50%; 
    right: 0; /* left: 50% */ 
    width: 200px; 
    margin-right: 200px; 
} 

あなただけright: 0にleft: 50%を変更する必要があります。