![正确的CSS不工作]( "正确的CSS不工作")
本文介绍了保证金 - 正确的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不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！