发表于： 2017-03-28 22:17:35
1 533
今天完成的事情：网页的头部，对仅仅是看起来还很好弄的头部，（当然我用了很多种方法如position之类的，都实现了，但是那些太麻烦了，还是想去解决问题）花了我3h。把刷OJ的时间都占了，终于。。
明天的计划：完成任务4。
遇到的问题&今天的收获：
一行内3个行内元素如何实现居左居中和居右。
开始，我是这样写的：
<style>
header{width: 100%;height: 10vh;background:#5FC0CD;}
header >*{display: inline-block;color: white;line-height:10vh;}
.sign_up{float: left;}
.sign_out{float: right;}
.sign_in{text-align: center;(注意这里)width: 10rem;}
</style>
</head>
<body>
<!-- 头部 -->
<header>
<!-- <a href="#" class="sign_up">注册</a> -->
<span class="sign_up">注册</span>
<span class="sign_in">登陆</span>
<!-- <a href="#" class="sign_out">关闭</a> -->
<span class="sign_out">关闭</span>
</header>
<!-- 头部结束 -->
</body>
（代码不要在意，本来是外链CSS的，为了看着好看，reset都没）看上去十分的美好，注册左浮动，关闭右浮动，然后登陆居中。
事实却不如想象中的美好，它变成了这样：
为什么呢？答案是：text-align:center
这里的text-align:center；应该放置在header中，而不应该放在span里。header中的text-align:center；意味着把header中的span文字部分居中，而span里的text-align:center，意味着把span里的文字居中。
总结：很小的问题，费了很多时间，在这期间也各种搜索，各种看手册，也加深了对居中的理解，望共勉。
返回列表
评论