V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
zeroday
V2EX  ›  前端开发

一个前端页面布局问题

  •  
  •   zeroday · 2015-05-25 22:59:09 +08:00 · 2590 次点击
    这是一个创建于 3481 天前的主题,其中的信息可能已经有所发展或是发生改变。

    刚学 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
        1
    theFool  
       2015-05-25 23:33:29 +08:00   ❤️ 1
    ul {padding-left: 0;}

    这样可以么?
    sneezry
        2
    sneezry  
       2015-05-25 23:37:58 +08:00   ❤️ 1
    ul -> padding-start: 0
    emric
        3
    emric  
       2015-05-25 23:51:59 +08:00
    如果是教程, 那也太不尽责了. 教导前端新手, 应该从浏览器默认样式开始.
    zeroday
        4
    zeroday  
    OP
       2015-05-26 00:08:04 +08:00
    @theFool
    @sneezry 谢谢,可以了。能不能问个为什么页面会突然向右偏移了。

    我记得按教程提示一步一步来的时候,显示的结果还是没有问题的,但是,最后写完后就发现中间往下向右偏移。
    sneezry
        5
    sneezry  
       2015-05-26 00:41:57 +08:00   ❤️ 1
    @zeroday 列表的默认样式有左缩进咩,那个用几个div多好啊,另外你发现没,ul的高度你获取不到,因为你用了float: left。如果最后有一个clear: both就能获取到正确高度了。
    Keinez
        6
    Keinez  
       2015-05-26 00:47:27 +08:00
    先写reset好不好?底下几个ul的点都还在。
    zeroday
        7
    zeroday  
    OP
       2015-05-26 01:26:45 +08:00
    @Keinez 这个我也觉得很奇怪,我在类中设置了 { list-style: none; }, 并且在 Safari 和 Chrome 测试过,没有显示 ul 的点,但是不知道怎么在 codepen.io 中显示这些点了。
    zeroday
        8
    zeroday  
    OP
       2015-05-26 01:33:18 +08:00
    @sneezry 哦,原来是这样子。
    banri
        9
    banri  
       2015-05-26 02:27:26 +08:00 via iPhone   ❤️ 1
    浏览器默认样式,ul在大多浏览器里有40px的左内边距。

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

    初学者的话建议搜索一下resetcss,有一定基础后更换成normalize.css
    banri
        10
    banri  
       2015-05-26 02:33:37 +08:00 via iPhone   ❤️ 1
    另外,针对内层元素浮动造成外层元素自动高度塌陷的问题(这不是bug),需要触发BFC。简单粗暴的方式是外层元素添加overflow(根据需求选择值为auto还是hidden,通常前者。),但这个方法存在一定问题,会使得win下的中键失效。

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

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

    需要时给外层元素添加上即可,通用性极强~
    zeroday
        11
    zeroday  
    OP
       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
        12
    banri  
       2015-05-27 00:42:39 +08:00   ❤️ 1
    @zeroday clearfix这个样式加在父容器上就可以啦,和overflow一样都是写在父容器上的
    zeroday
        13
    zeroday  
    OP
       2015-05-27 22:13:10 +08:00
    @banri 哦,原来是这样。谢谢帮助。能方便看看 info-section contact 这块吗?这块看起来有点歪。
    banri
        14
    banri  
       2015-05-27 22:26:32 +08:00
    @zeroday 设定宽度max-width以后,使用margin: 0 auto;
    其中0可以调整修改……或者margin-left:auto;margin-right:auto
    zeroday
        15
    zeroday  
    OP
       2015-05-27 22:48:25 +08:00
    @banri 请问是这样添加吗?

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

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

    页面排版还是没有变化...
    banri
        16
    banri  
       2015-05-27 22:51:48 +08:00   ❤️ 1
    @zeroday 不是mq

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

    PS:建议系统的学习一下啦,推荐大漠的图解CSS3
    zeroday
        17
    zeroday  
    OP
       2015-05-27 23:14:44 +08:00
    @banri 谢谢推荐,一定购买阅读。

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


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


    http://codepen.io/anon/pen/xGOJyb
    banri
        18
    banri  
       2015-05-27 23:18:04 +08:00
    @zeroday 加宽输入框和外层容器的宽度~~~
    zeroday
        19
    zeroday  
    OP
       2015-05-27 23:40:26 +08:00
    @banri 我试着加宽,但是每次加宽就会发现 button 的位置就偏了。
    banri
        20
    banri  
       2015-05-27 23:49:21 +08:00
    @zeroday 没问题啊
    错觉吧,只是文字提示比较左,调整下就好~~
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3597 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 04:26 · PVG 12:26 · LAX 20:26 · JFK 23:26
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.