一个前端页面布局问题

[zeroday]

刚学 CSS，按网络教程写了一个个人页面，完成后发觉页面从 EDUCATION & EXPERIENCE 后一直往右边偏移。看了一遍代码没发现有什么不妥的地方，前辈方便帮忙看看，指出一些改正的地方吗？

页面效果：

http://codepen.io/anon/pen/xGOJyb

https://github.com/henry-zhuang/css0to1-startkit

[theFool]

ul {padding-left: 0;}

这样可以么？

[sneezry]

ul -> padding-start: 0

[emric]

如果是教程, 那也太不尽责了. 教导前端新手, 应该从浏览器默认样式开始.

[zeroday]

@theFool
@sneezry 谢谢，可以了。能不能问个为什么页面会突然向右偏移了。

我记得按教程提示一步一步来的时候，显示的结果还是没有问题的，但是，最后写完后就发现中间往下向右偏移。

[sneezry]

@zeroday 列表的默认样式有左缩进咩，那个用几个div多好啊，另外你发现没，ul的高度你获取不到，因为你用了float: left。如果最后有一个clear: both就能获取到正确高度了。

[Keinez]

先写reset好不好？底下几个ul的点都还在。

[zeroday]

@Keinez 这个我也觉得很奇怪，我在类中设置了 { list-style: none; }, 并且在 Safari 和 Chrome 测试过，没有显示 ul 的点，但是不知道怎么在 codepen.io 中显示这些点了。

[zeroday]

@sneezry 哦，原来是这样子。

[banri]

浏览器默认样式，ul在大多浏览器里有40px的左内边距。

padding-start是webkit中为了更好兼容竖排的一种默认行为（不确定），需要覆盖时用padding-left就可以了。

初学者的话建议搜索一下resetcss，有一定基础后更换成normalize.css

[banri]

另外，针对内层元素浮动造成外层元素自动高度塌陷的问题（这不是bug），需要触发BFC。简单粗暴的方式是外层元素添加overflow（根据需求选择值为auto还是hidden，通常前者。），但这个方法存在一定问题，会使得win下的中键失效。

完美的方式是建立一个清除浮动的样式

.cf:after {content:'';display:table;clear:both}

需要时给外层元素添加上即可，通用性极强~

[zeroday]

@banri 谢谢指点了。

我试着用

:after {content:'';display:table;clear:both}

替换 overflow: hidden 这个用法，但是却一直没有出效果，这里是一个 demo，能帮忙看一下哪里有问题吗？

http://codepen.io/anon/pen/QbGOjG

[banri]

@zeroday clearfix这个样式加在父容器上就可以啦，和overflow一样都是写在父容器上的

[zeroday]

@banri 哦，原来是这样。谢谢帮助。能方便看看 info-section contact 这块吗？这块看起来有点歪。

[banri]

@zeroday 设定宽度max-width以后，使用margin: 0 auto;
其中0可以调整修改……或者margin-left:auto;margin-right:auto

[zeroday]

@banri 请问是这样添加吗?

@media only screen and (max-width: 960px) {

.container {
width: 100%;
margin: 0 auto;
}

页面排版还是没有变化...

[banri]

@zeroday 不是mq

是包裹评论框的那个外部元素设置max-width
只有设置了宽度，才能够使用margin进行居中~

PS：建议系统的学习一下啦，推荐大漠的图解CSS3

[zeroday]

@banri 谢谢推荐，一定购买阅读。

改好是改好了，但是总是感觉哪里乖乖的。


#message {
max-width: 193px;
margin: 0 auto;
}


http://codepen.io/anon/pen/xGOJyb

[banri]

@zeroday 加宽输入框和外层容器的宽度~~~

[zeroday]

@banri 我试着加宽，但是每次加宽就会发现 button 的位置就偏了。

[banri]

@zeroday 没问题啊
错觉吧，只是文字提示比较左，调整下就好~~