一个前端页面布局问题

2015-05-25 22:59:09 +08:00
 zeroday

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

页面效果:

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

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

2602 次点击
所在节点    前端开发
20 条回复
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
浏览器默认样式,ul在大多浏览器里有40px的左内边距。

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

初学者的话建议搜索一下resetcss,有一定基础后更换成normalize.css
banri
2015-05-26 02:33:37 +08:00
另外,针对内层元素浮动造成外层元素自动高度塌陷的问题(这不是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 没问题啊
错觉吧,只是文字提示比较左,调整下就好~~

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/193690

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX