保证金 - 正确的CSS不工作 [英] Margin-Right on css not Working

问题描述

在学校里，我一直在与Coding混淆，因为它对我最感兴趣，并且在学校的大部分时间都自学了Html-Css和Js。

我一直在重新创建我学校的网站，并且遇到了一些问题。

我的CSSMargin-Right没有工作。
我一直试图用CSS和Style命令使用左右边距来使< Div> 区域居中，而右边将永远不会工作。

我不想仅使用 position：absolute; 命令，因为我想在一边留出一些空间，以便您可以看到背景。
这是我的Html代码。

CSS：

  .Isaac {
 width：100％; 
 padding：4px; 
 margin-right：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; 
} 
  

HTML：

 < div class =IsaacStyle =Background-color：＃E6E6E6; Margin-Top：40px> 
 <！ -  div content  - > 
< / div> 
  

编辑：100x事件对我来说只是一个愚蠢的错误，我的意思是 100px

另外，我更改了Margin-Right：100x;以margin-right：100px;它仍然没有区别

我希望你能帮助我解决方案

问题是 width：100％放在 .Isaac div上。这使得divs自己和父母身体一样宽。然后将边距延伸到屏幕右侧。

解决方案：删除宽度：100％。

  .Isaac {/ * width：100％; * / padding：4px;保证金 - 右：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; } .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;背景：-webkit-gradient（线性，左上角，左下角，颜色停止（0.05，#ffffff），color-stop（1，#ffffff））;背景：-moz-linear-gradient（top，#ffffff 5％，#ffffff 100％）;背景：-webkit-linear-gradient（top，#ffffff 5％，#ffffff 100％）;背景：-o-linear-gradient（顶部，#ffffff 5％，#ffffff 100％）;背景：-ms-linear-gradient（top，#ffffff 5％，#ffffff 100％）;背景：线性渐变（至底部，#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;显示：inline-block;光标：指针;颜色：＃000000; font-family：Arial; font-size：13px; padding：6px 24px;文字修饰：无; 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））;背景：-moz-linear-gradient（top，#ffffff 5％，#ffffff 100％）;背景：-webkit-linear-gradient（top，#ffffff 5％，#ffffff 100％）;背景：-o-linear-gradient（顶部，#ffffff 5％，#ffffff 100％）;背景：-ms-linear-gradient（top，#ffffff 5％，#ffffff 100％）;背景：线性渐变（至底部，#ffffff 5％，#ffffff 100％）; filter：progid：DXImageTransform.Microsoft.gradient（startColorstr ='＃ffffff'，endColorstr ='＃ffffff'，GradientType = 0）; background-color：#ffffff; } .myButton：active {position：relative; top：1px; } / *我加了这个，因为body标签没有出现在代码片段中* / body {background-attachment：fixed;背景重复：不重复;背景大小：100％100％;  
 < div class =IsaacStyle =Background-color：＃E6E6E6; Margin-Top：40px>< img src =http ：//www.conway.k12.wa.us/sites/default/files/logov4.pngstyle =width：150px; height：50px;>< a href =＃class =Hello >菜单< / A> ：< a href =＃class =Hello>家庭访问< / a> ：< a href =＃class =Hello> Facebook /社交媒体< a /> ：< a href =＃class =Hello>< br>< a href =＃class =MyButton>区域办公室< / a> < a href =＃class =myButton> School Office< / a>< a href =＃class =myButton> Departments< / a>< a href =＃class =myButton>员工< / a>< a href =＃class =myButton>家庭< / a>< a href =＃class =myButton> ;< a href =＃class =myButton> Board< / a>< / div> 
 

I have been messing with Coding during school because it interests me the most out of anything at school, and have been self-teaching myself Html-Css-and Js for most of the school year.

I have been re-creating my school's website, and I have run into some problems.

My CSS "Margin-Right" command has not been working. I have been trying to center a <Div> area with CSS and the "Style" command using margin left and right, and the right will never work.
I don't want to just use the position: absolute; command because I want some space on the side so you can see the background.
Here is my Html code.

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>

Edit: The "100x" thing was just a silly error on my part, I meant to have "100px"
Also, I changed Margin-Right: 100x ; to margin-right:100px; and it still have no difference
I hope you can help me

解决方案

The problem is the width:100% on the .Isaac divs. This causes the divs themselves to be as wide as their parent, the body. Then the margins extend to the right of that, off screen.

Solution: remove the 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不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！