元素不在包装中居中对齐，当我设置包装的宽度时，它会离开浏览器宽度..任何解决方案？

-5

.wrapper内部的元素没有居中对齐，在将宽度分配给.wrapper后，它显示了一个水平滚动条。元素不在包装中居中对齐，当我设置包装的宽度时，它会离开浏览器宽度..任何解决方案？

#footer { 
 
    width:100%; 
 
} 
 
#footer .wrapper{ 
 
    background:red; 
 
    margin:0 auto; 
 
    position:relative; 
 
    width: 1024px; 
 
    height: 192px; 
 
    font-size:a 
 
} 
 
#footer .wrapper .col { 
 
    width: 20%; 
 
    height: 192px; 
 
    background: green; 
 
    display: inline-block; 
 
}

<footer id="footer"> 
 
    <div class="wrapper"> 
 
    <div class="col right-list"> 
 
    </div> 
 
    <div class="col middle-list"> 
 
    </div> 
 
    <div class="col left-list"> 
 
    </div> 
 
    </div> 
 
</footer>

任何建议，为什么发生这种情况？

来源

2016-11-21 Mr Gendy

请提供关于你期待看到什么和更多的信息如何不同于你目前这个 – hairmot

使用'MAX-width'，而不是'width'为'.wrapper'并添加'文本对齐：中心'对齐中心div –

发生这种情况是因为您给像素#footer .wrapper中的width属性，请将其更改为百分比以获得所需的输出。

html,body{ 
 
    width:100%; 
 
    height:100%; 
 
    } 
 
#footer { 
 
    width:100%; 
 
} 
 
#footer .wrapper{ 
 
    background:red; 
 
    margin:0 auto; 
 
    position:relative; 
 
    width: 100%; 
 
    height: 100%; 
 
    /*font-size:a*/ 
 
} 
 
#footer .wrapper .col { 
 
    width: 20%; 
 
    height: 192px; 
 
    background: green; 
 
    display: inline-block; 
 
}

<footer id="footer"> 
 
     <div class="wrapper"> 
 
      <div class="col right-list"> 
 
      </div> 
 
      <div class="col middle-list"> 
 
      </div> 
 
      <div class="col left-list"> 
 
      </div> 
 
     </div> 
 
</footer>

来源

2016-11-21 11:28:34

#footer .wrapper{ 
    background:red; 
    margin:0 auto; 
    position:relative; 
    max-width: 1024px; 
    width: 100%; 
    height: 192px; 
    font-size:a 
}

你可能不设定一个确定的宽度

来源

2016-11-21 11:29:00

不工作悲伤：/// –

对不起，我可能会误解你想要的 –

您寻找的是这样的：

https://jsfiddle.net/3ux7bdpf/

#footer { 
    width:100%; 
} 
#footer .wrapper{ 
    background:red; 
    margin:0 auto; 
    position:relative; 
    height: 192px; 
    font-size:a 
} 
#footer .wrapper .col { 
    width: 20%; 
    margin-right:10%; 
    height: 192px; 
    background: green; 
    display: inline-block; 
} 
#footer .wrapper .col:first-child { 
    margin-left:10%; 
} 
#footer .wrapper .col:last-child { 
    margin-right:0; 
}

来源

2016-11-21 11:30:09 tigerdi

我会给它一个去谢谢 –

yessss它完美的工作谢谢，你知道如何使其响应？伟大的thanx –

它现在是敏感的，因为当屏幕变得更宽/更窄时，三列将扩大/缩小。如果你想让列保持相同的宽度，那么你不会在列上使用20％的宽度。对于任何其他响应式样式，您可以使用@media查询来做到这一点。尽管如此，您应该将其标记为您原始问题的答案。 – tigerdi

它很简单。 为什么要将固定宽度分配给.wrapper

只要把宽度：100％;或任何你想分别页脚的宽度在％。

取而代之分配最大宽度。因此，如果浏览器大小超过最大宽度，它将根据您的最大宽度进行调整。

#footer { 
 
    width:100%; 
 
} 
 
#footer .wrapper{ 
 
    max-width: 1024px; 
 
    background:red; 
 
    margin:0 auto; 
 
    position:relative; 
 
    width: 100%; 
 
    height: 192px; 
 
    text-align: center; 
 
} 
 
#footer .wrapper .col { 
 
    width: 20%; 
 
    height: 192px; 
 
    background: green; 
 
    display: inline-block; 
 
}

<footer id="footer"> 
 
    <div class="wrapper"> 
 
    <div class="col right-list"> 
 
    </div> 
 
    <div class="col middle-list"> 
 
    </div> 
 
    <div class="col left-list"> 
 
    </div> 
 
    </div> 
 
</footer>

来源

2016-11-21 11:35:47

很高兴你的回答，但我希望绿色元素不会集中在右边或左边，谢谢:) –

嘿，我刚刚更新你现在可以看到。 –

非常完美谢谢你真的很棒 –

元素不在包装中居中对齐，当我设置包装的宽度时，它会离开浏览器宽度..任何解决方案？

回答

相关问题