Question

我在学校期间一直在搞乱Coding，因为它最让我感兴趣的是学校里的任何事情，并且在学年的大部分时间里都是自学Html-Css-and Js。

我一直在重建我校的网站，但我遇到了一些问题。

我的CSS“Margin-Right”命令尚未运行。我一直在尝试使用CSS将<Div>区域居中，使用左边和右边的“样式”命令，右边将无法工作。
我不想只使用position: absolute;命令，因为我想在侧面留出一些空间，以便您可以看到背景。
这是我的Html代码。

CSS：

    .Isaac {
      width: 100%;
      padding: 4px;
      margin-right:100px;
      background-color: white;
      -webkit-box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.4);
      -moz-box-shadow: 0px 2px 12px rgba(23, 69, 88, .5);
      -webkit-border-radius: 100px;
      -moz-border-radius: 100px;
      border-radius: 10px;
    }

HTML：

  <div class="Isaac" Style="Background-color: #E6E6E6 ; Margin-Top: 40px">
      <!-- div content -->
  </div>

编辑：“100x”对我来说只是一个愚蠢的错误，我的意思是“100px”
另外，我更改了Margin-Right：100x;保证金权利：100px;它仍然没有区别我希望你能帮助我

Answer 1

变化：

Margin-Right: 100x;

为：

margin-right: 100px;

Answer 2

使用文字对齐中心将内容与中心对齐

使用margin-right的问题是：x而不是px

.Isaac { 宽度：100％; 填充：4px; text-align：center; 保证金权利：100px; 背景颜色：白色; -webkit-box-shadow：0px 0px 24px rgba（0,0,0,0.4）; -moz-box-shadow：0px 2px 12px rgba（23,69,88，.5）; -webkit-border-radius：100px; -moz-border-radius：100px; border-radius：10px; }

希望这是您想要实现的目标

Answer 3

问题是width:100% div上的.Isaac。这导致div本身与其父亲身体一样宽。然后边距延伸到屏幕右侧。

解决方案：删除width:100%。

    
    .Isaac {
      /*width: 100%;*/
      padding: 4px;
      Margin-Right: 100px;
      background-color: white;
      -webkit-box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.4);
      -moz-box-shadow: 0px 2px 12px rgba(23, 69, 88, .5);
      -webkit-border-radius: 100px;
      -moz-border-radius: 100px;
      border-radius: 10px;
    }

    .myButton {
      -moz-box-shadow: inset 0px 5px 0px 0px #000000;
      -webkit-box-shadow: inset 0px 5px 0px 0px #000000;
      box-shadow: inset 0px 1px 0px 0px #000000;
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #ffffff));
      background: -moz-linear-gradient(top, #ffffff 5%, #ffffff 100%);
      background: -webkit-linear-gradient(top, #ffffff 5%, #ffffff 100%);
      background: -o-linear-gradient(top, #ffffff 5%, #ffffff 100%);
      background: -ms-linear-gradient(top, #ffffff 5%, #ffffff 100%);
      background: linear-gradient(to bottom, #ffffff 5%, #ffffff 100%);
      filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0);
      background-color: #ffffff;
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      border-radius: 3px;
      border: 1px solid #000000;
      display: inline-block;
      cursor: pointer;
      color: #000000;
      font-family: Arial;
      font-size: 13px;
      padding: 6px 24px;
      text-decoration: none;
      text-shadow: 0px 1px 0px #000000;
    }
    
    .myButton:hover {
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #ffffff));
      background: -moz-linear-gradient(top, #ffffff 5%, #ffffff 100%);
      background: -webkit-linear-gradient(top, #ffffff 5%, #ffffff 100%);
      background: -o-linear-gradient(top, #ffffff 5%, #ffffff 100%);
      background: -ms-linear-gradient(top, #ffffff 5%, #ffffff 100%);
      background: linear-gradient(to bottom, #ffffff 5%, #ffffff 100%);
      filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0);
      background-color: #ffffff;
    }
    
    .myButton:active {
      position: relative;
      top: 1px;
    }

/* I added this, because the body start tag doesn't appear in the snippet */
body {
  background-attachment: fixed; background-repeat: no-repeat; Background-size: 100% 100%; background-image:url(https://upload.wikimedia.org/wikipedia/commons/3/32/Mount_Rainier_from_above_Myrtle_Falls_in_August.JPG)
    }

  <div class="Isaac" Style="Background-color: #E6E6E6;  Margin-Top: 40px"><img src="http://www.conway.k12.wa.us/sites/default/files/logov4.png" style="width:150px;height:50px;"><a href="#" class="Hello">Menu</a> : <a href="#" class="Hello">Family access</a> : <a href="#" class="Hello"> Facebook/Social Media<a/> : <a href="#" class="Hello"><br><a href="#" class="MyButton">District Office</a>
    <a
    href="#" class="myButton">School Office</a><a href="#" class="myButton">Departments</a><a href="#" class="myButton">Staff</a><a href="#" class="myButton">Family</a><a href="#" class="myButton">Teachers</a><a href="#" class="myButton">Board</a></div>

保证金 - 权利在css不工作

3 个答案: