Html 边距和填充不显示_Html_Css_Wordpress_Responsive

Html 边距和填充不显示

html css wordpress

Html 边距和填充不显示,html,css,wordpress,responsive,Html,Css,Wordpress,Responsive,我正在Wordpress的干净模板上使用响应网格创建登录页。我无法在桌面版上显示我的边距或填充，而且我一辈子也无法找出我做错了什么。它们在手机上显示得很好，但对_内容的尝试和应用不会起作用 <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> /* SECTIONS */ .section { clear: both; paddi

我正在Wordpress的干净模板上使用响应网格创建登录页。我无法在桌面版上显示我的边距或填充，而且我一辈子也无法找出我做错了什么。它们在手机上显示得很好，但对_内容的尝试和应用不会起作用

<head>
   <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
/*  SECTIONS  */
.section {
clear: both;
padding: 0px;
margin: 0px;
}

 /*  COLUMN SETUP  */
.col {
display: block;
float:left;
margin: 1% 0 1% 2.5%;}

.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

* {
box-sizing: border-box;
}

.span_12_of_12 {
width: 100%;}

.span_11_of_12 {
width: 91.45%;}

.span_10_of_12 {
width: 82.91%;}

.span_9_of_12 {
width: 74.37%;}

.span_8_of_12 {
width: 65.83%;}

.span_7_of_12 {
width: 57.29%;}

.span_6_of_12 {
width: 48.75%;}

.span_5_of_12 {
width: 40.20%;}

.span_4_of_12 {
width: 31.66%;}

.span_3_of_12 {
width: 23.12%;}

.span_2_of_12 {
width: 14.58%;}

.span_1_of_12 {
width: 6.041%;}

@media only screen and (max-width: 600px) {
.col {  margin: 1% 0 1% 0%; }

.span_1_of_12, .span_2_of_12, .span_3_of_12, .span_4_of_12, .span_5_of_12, .span_6_of_12, .span_7_of_12, .span_8_of_12, .span_9_of_12, .span_10_of_12, .span_11_of_12, .span_12_of_12 {
width: 100%; 
}}

#content-desktop {
display: inline; }

#content-mobile {
display: none; }
@media only screen and (max-width: 600px) {
#content-desktop {
display: none;}

#content-mobile {
display: inline;}

.content {
   padding: 2% 5% 2% 5%; }


#rightform {
   padding: 2% 5% 2% 5%;
color: white;
</style>
</head>

</div>

<div class="section group">
    <div class="col span_6_of_12" id="content-mobile">
         <div class="content">
         Mobile Body Copy Two
    </div>
   </div>

  <div class="section group">
  <div class="col span_3_of_12 ctabox" id="content-mobile">
        <a href="#taketest">
        <img src="http://polaron.com.au/wp-content/uploads/2017/09/CTA-Small.png" style="margin: 0% 5% 0% 5%; max-height:120px; vertical-align:middle" /> </a>

   </div> </div>


/*部分*/
.科{
明确：两者皆有；
填充：0px；
边际：0px；
}
/*列设置*/
上校{
显示：块；
浮动：左；
保证金：1%01%2.5%；}
.col:第一个子项{左边距：0；}
/*分组*/
.小组：之前，
.group:在{content:：；display:table；}之后
.group:在{clear:both；}之后
.group{zoom:1；/*用于IE 6/7*/}
* {
框大小：边框框；
}
.span_12_of_12{
宽度：100%；}
.第11页，共12页{
宽度：91.45%；}
.span_10_/u 12{
宽度：82.91%；}
.第9页，共12页{
宽度：74.37%；}
.span_8_/u 12{
宽度：65.83%；}
.span_7_/u 12{
宽度：57.29%；}
.span_6_/u 12{
宽度：48.75%；}
.span_5_/u 12{
宽度：40.20%；}
.span_4_/u 12{
宽度：31.66%；}
.span_3_/u 12{
宽度：23.12%；}
.span_2_/u 12{
宽度：14.58%；}
.span_1_/u 12{
宽度：6.041%；}
@仅介质屏幕和（最大宽度：600px）{
.col{margin:1%01%0%；}
.span_1_of_12、.span_2_of_12、.span_3_of_12、.span_4_of_12、.span_5_of_12、.span_6_of_12、.span_7_of_12、.span_8_of_12、.span_9_of_12、.span_10_of_12、.span_11_of_12{
宽度：100%；
}}
#内容桌面{
显示：内联；}
#内容移动{
显示：无；}
@仅介质屏幕和（最大宽度：600px）{
#内容桌面{
显示：无；}
#内容移动{
显示：内联；}
.内容{
填充：2%5%2%5%；}
#右图{
填充：2%5%2%5%；
颜色：白色；

HTML：

<div class="section group">

    <div class="content">
    <div class="col span_6_of_12">

    <div id="content-desktop">
        Body Content Here
    </div>

    <div id="content-mobile">
        Mobile Body Content Here
    </div>

</div>
</div>

<div id="rightform"> 
<div class="col span_6_of_12">
    <a name="taketest"></a>

</div>

<div class="section group">
    <div class="col span_6_of_12" id="content-mobile">
         <div class="content">
         Mobile Body Copy Two
    </div>
   </div>

  <div class="section group">
  <div class="col span_3_of_12 ctabox" id="content-mobile">
        <a href="#taketest">
        <img src="http://polaron.com.au/wp-content/uploads/2017/09/CTA-Small.png" style="margin: 0% 5% 0% 5%; max-height:120px; vertical-align:middle" /> </a>

   </div> </div>


这里的正文内容
移动身体内容在这里

在小于600px的情况下，一切正常。在所有文本周围填充。但在桌面上？没有。它说它在那里，但我的内容中的文本正好靠在窗口边缘。如果我尝试设置最大宽度或边距，这也不会起作用。我遗漏了什么（可能很明显！）

</div>

<div class="section group">
    <div class="col span_6_of_12" id="content-mobile">
         <div class="content">
         Mobile Body Copy Two
    </div>
   </div>

  <div class="section group">
  <div class="col span_3_of_12 ctabox" id="content-mobile">
        <a href="#taketest">
        <img src="http://polaron.com.au/wp-content/uploads/2017/09/CTA-Small.png" style="margin: 0% 5% 0% 5%; max-height:120px; vertical-align:middle" /> </a>

   </div> </div>

这是一个指向HTML和CSS的链接。

您的填充将只显示到600像素宽，因为它位于

</div>

<div class="section group">
    <div class="col span_6_of_12" id="content-mobile">
         <div class="content">
         Mobile Body Copy Two
    </div>
   </div>

  <div class="section group">
  <div class="col span_3_of_12 ctabox" id="content-mobile">
        <a href="#taketest">
        <img src="http://polaron.com.au/wp-content/uploads/2017/09/CTA-Small.png" style="margin: 0% 5% 0% 5%; max-height:120px; vertical-align:middle" /> </a>

   </div> </div>

@仅媒体屏幕和（最大宽度：600px）{

。为其他格式添加

最大宽度

，或放置

内容{
填充：2%5%2%5%；}

。在

@仅媒体屏幕之外，并且（最大宽度：600px）{

如果您正在显示包含PHP的代码，您需要我们使用PHP来帮助您，这将消除像我这样不使用PHP的人。您应该始终显示呈现的HTML和CSS。抱歉，第一次在这里发布！我已经删除了原始代码中对PHP的所有引用，并且这里有一个指向呈现的HTML和CSS的链接：指向您的示例代码不允许使用ird第三方源代码。您必须在此处提供显示问题的所有标记和代码。第三方链接更改、消失或消失，并且不会在将来帮助任何人解决相同的问题：那么您在此处发布的标记和代码是否显示问题？

</div>

<div class="section group">
    <div class="col span_6_of_12" id="content-mobile">
         <div class="content">
         Mobile Body Copy Two
    </div>
   </div>

  <div class="section group">
  <div class="col span_3_of_12 ctabox" id="content-mobile">
        <a href="#taketest">
        <img src="http://polaron.com.au/wp-content/uploads/2017/09/CTA-Small.png" style="margin: 0% 5% 0% 5%; max-height:120px; vertical-align:middle" /> </a>

   </div> </div>