无法将CSS项目移到左侧

Question

当我尝试使用margin-right: 200px向右移动CSS元素时，它不会移动。但是，margin-left: 200px确实会移动。我的CSS文件如下所示：

＆＃13;

＆＃13;

        .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;
      }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

任何帮助将不胜感激！

Answer 1

将身体改为亲戚，并使用右手来修复它。

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

使用绝对div，您必须使用right和margin-right，或者您可以使用right代替margin-right。在您的情况下，我删除了margin-right并删除了left并仅使用了right。

＆＃13;

＆＃13;

.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;
      }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

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

您只需将left: 50%更改为right: 0;

即可