一个前端页面布局问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 3467 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

页面效果：

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

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

页面

偏移

前端

20 条回复 • 2015-05-27 23:49:21 +08:00

theFool

2015-05-25 23:33:29 +08:00

ul {padding-left: 0;}

这样可以么？

sneezry

2015-05-25 23:37:58 +08:00

ul -> padding-start: 0

emric

2015-05-25 23:51:59 +08:00

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

zeroday

2015-05-26 00:08:04 +08:00

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

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

sneezry

2015-05-26 00:41:57 +08:00

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

Keinez

2015-05-26 00:47:27 +08:00

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

zeroday

2015-05-26 01:26:45 +08:00

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

zeroday

2015-05-26 01:33:18 +08:00

@sneezry 哦，原来是这样子。

banri

2015-05-26 02:27:26 +08:00 via iPhone

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

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

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

banri

2015-05-26 02:33:37 +08:00 via iPhone

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

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

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

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

zeroday

2015-05-26 23:13:15 +08:00

@banri 谢谢指点了。

我试着用

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

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

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

banri

2015-05-27 00:42:39 +08:00

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

zeroday

2015-05-27 22:13:10 +08:00

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

banri

2015-05-27 22:26:32 +08:00

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

zeroday

2015-05-27 22:48:25 +08:00

@banri 请问是这样添加吗?

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

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

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

banri

2015-05-27 22:51:48 +08:00

@zeroday 不是mq

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

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

zeroday

2015-05-27 23:14:44 +08:00

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

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

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

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

banri

2015-05-27 23:18:04 +08:00

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

zeroday

2015-05-27 23:40:26 +08:00

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

banri

2015-05-27 23:49:21 +08:00

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