今天给大家带来的是个人主页网在用户编辑自己个人主页时,文本层的定位对齐问题.马上进入正题.

这里是本人刚注册的一个测试账号个人主页,我们编辑的内容都在这个文本层里显示出来,这个地方所有问题似乎太靠左了一点,有没有什么办法解决呢?

除了在文本编辑里面所有行开始的地方加空格外,我们还有另外一个简单的方法,下面给大家说明.

我们首先进入编辑主页页面,点击编辑器里的左上放第一个按钮进入,源码编辑模式,如图所示

这里就是我们文本层的源代码了,这里可以看到所有的html元素,比如<p>代表换行,<a href.....</a>代表超链接,熟悉后这里可以自由编辑.

我们在最开始的地方加上<div style="margin-left:10px; margin-top:10px;">,最末尾的地方加上</div>这两端代码.

<div style="margin-left:10px; margin-top:10px;"><p> 视频:　<a href="http://www.youku.com" data-cke-saved-href="http://www.youku.com" target="_blank">优酷</a>　<a href="http://www.tudou.com/" data-cke-saved-href="http://www.tudou.com/" target="_blank">土豆</a>　<a href="http://www.iqiyi.com/" data-cke-saved-href="http://www.iqiyi.com/" target="_blank">奇艺</a>　<a href="http://www.kankan.com/" data-cke-saved-href="http://www.kankan.com/" target="_blank">迅雷看看</a>　<a href="http://tv.sohu.com/" data-cke-saved-href="http://tv.sohu.com/" target="_blank">搜狐视频</a>　<a href="http://www.letv.com/" data-cke-saved-href="http://www.letv.com/" target="_blank">乐视</a></p> <p> 游戏:　<a href="http://www.4399.com/" data-cke-saved-href="http://www.4399.com/" target="_blank">4399小游戏</a>　<a href="http://www.17173.com/" data-cke-saved-href="http://www.17173.com/" target="_blank">17173</a>　<a href="http://www.duowan.com/" data-cke-saved-href="http://www.duowan.com/" target="_blank">多玩</a>　<a href="http://www.gamersky.com/" data-cke-saved-href="http://www.gamersky.com/" target="_blank">游民星空</a>　<a href="http://youxi.baidu.com/" data-cke-saved-href="http://youxi.baidu.com/" target="_blank">百度游戏</a></p> <p> 动漫:　<a href="http://www.imanhua.com/" data-cke-saved-href="http://www.imanhua.com/" target="_blank">爱漫画</a>　<a href="http://donghua.178.com/" data-cke-saved-href="http://donghua.178.com/" target="_blank">178动漫</a>　<a href="http://www.narutom.com/" data-cke-saved-href="http://www.narutom.com/" target="_blank">火影中文网</a>　<a href="http://www.dm123.cn/" data-cke-saved-href="http://www.dm123.cn/" target="_blank">动漫fans</a>　<a href="http://www.dm5.com/" data-cke-saved-href="http://www.dm5.com/" target="_blank">你的我的漫画</a></p> <p> 搞笑:　<a href="http://www.qiushibaike.com/" data-cke-saved-href="http://www.qiushibaike.com/" target="_blank">糗事百科</a>　<a href="http://hxyl.net/" data-cke-saved-href="http://hxyl.net/" target="_blank">河蟹娱乐</a>　<a href="http://www.haha168.com/" data-cke-saved-href="http://www.haha168.com/" target="_blank">八目妖搞笑</a>　<a href="http://juetuzhi.net/" data-cke-saved-href="http://juetuzhi.net/" target="_blank">掘图志</a>　<a href="http://baozoumanhua.com/" data-cke-saved-href="http://baozoumanhua.com/" target="_blank">暴走漫画</a></p> <p> 图库:　<a href="http://tu.duowan.com/tu/" data-cke-saved-href="http://tu.duowan.com/tu/" target="_blank">多玩图库</a>　<a href="http://tt.mop.com/" data-cke-saved-href="http://tt.mop.com/" target="_blank">猫扑贴图</a>　<a href="http://pic.daqi.com/" data-cke-saved-href="http://pic.daqi.com/" target="_blank">大旗贴图</a>　<a href="http://ent.qq.com/picture.shtml" data-cke-saved-href="http://ent.qq.com/picture.shtml" target="_blank">腾讯图片</a>　<a href="http://wallpaper.desktx.com/" data-cke-saved-href="http://wallpaper.desktx.com/" target="_blank">桌面壁纸</a></p> <p> 新闻:　<a href="http://www.163.com/" data-cke-saved-href="http://www.163.com/" target="_blank">网易</a>　<a href="http://www.sina.com.cn/" data-cke-saved-href="http://www.sina.com.cn/" target="_blank">新浪</a>　<a href="http://www.sohu.com/" data-cke-saved-href="http://www.sohu.com/" target="_blank">搜狐</a>　<a href="http://www.qq.com/" data-cke-saved-href="http://www.qq.com/" target="_blank">腾讯</a>　<a href="http://www.ifeng.com/" data-cke-saved-href="http://www.ifeng.com/" target="_blank">凤凰网</a></p> <p> 音乐:　<a href="http://www.yinyuetai.com/" data-cke-saved-href="http://www.yinyuetai.com/" target="_blank">音悦台</a>　<a href="http://mp3.baidu.com/" data-cke-saved-href="http://mp3.baidu.com/" target="_blank">百度MP3</a>　<a href="http://www.1ting.com/" data-cke-saved-href="http://www.1ting.com/" target="_blank">一听音乐</a>　<a href="http://y.qq.com/" data-cke-saved-href="http://y.qq.com/" target="_blank">QQ音乐</a>　<a href="http://fm.baidu.com/" data-cke-saved-href="http://fm.baidu.com/" target="_blank">百度随心听</a></p> <p> 购物:　<a href="http://www.taobao.com/" data-cke-saved-href="http://www.taobao.com/" target="_blank">淘宝</a>　<a href="http://www.tmall.com/" data-cke-saved-href="http://www.tmall.com/" target="_blank">天猫</a>　<a href="http://www.360buy.com/" data-cke-saved-href="http://www.360buy.com/" target="_blank">京东商城</a>　<a href="http://www.amazon.cn/" data-cke-saved-href="http://www.amazon.cn/" target="_blank">亚马逊</a>　<a href="http://www.paipai.com/" data-cke-saved-href="http://www.paipai.com/" target="_blank">拍拍网</a></p> <p> 社交:　<a href="http://tieba.baidu.com/" data-cke-saved-href="http://tieba.baidu.com/" target="_blank">百度贴吧</a>　<a href="http://www.tianya.cn/" data-cke-saved-href="http://www.tianya.cn/" target="_blank">天涯社区</a>　<a href="http://www.kaixin001.com/" data-cke-saved-href="http://www.kaixin001.com/" target="_blank">开心网</a>　<a href="http://www.mop.com/" data-cke-saved-href="http://www.mop.com/" target="_blank">猫扑</a>　<a href="http://weibo.com/" data-cke-saved-href="http://weibo.com/" target="_blank">新浪微博</a></p> </div>

这里我们添加的代码效果就是多添加一个层,这个层从div开始/div结束,包括了我们文本内容,并且margin-left:10px; margin-top:10px;能实现这个层向右向上平移10像素

我们保存后刷新看效果变化.

这里可以看到,整个文本层往右下平移了10像素,有了这个方法,我们就可以更加轻松自在的随意编写我们的个人主页内容.

本次演示使用的个人空间地址