本文介绍了保证金 - 正确的CSS不工作的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

在学校里,我一直在与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>

编辑: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不工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-31 03:06