1 在使用文本元素与div内联放一起时中间老是会有空格,这个时候我们需要在html中将div与存放文本的容器或者元素写在一行。例如:
<div class="cirle"></div></div>
<em style="font-family: '微软雅黑';font-size: 13px;">北京</em>
这种方式写会产生空格,我们需要写成
<div class="cirle"></div></div><em style="font-family: '微软雅黑';font-size: 13px;">北京</em>,将文本放在span里面也是会存在这个问题
2 在ul里面li使用display: inline-block;ul里面文字会出现不在最外层div的情况,查看盒子,发现最外层margin有9.6px
要注意ul是块级元素,在使用时,需要对ul设置margin: 0px 0px 0px 0px;消除原先的margin,body在使用时也可以先设置一下margin: 0px 0px 0px 0px;在ul设置过后,样式恢复正常。
html&css的使用过程中,我们经常会遇到很多文字对齐问题。下面我要介绍一个有丁点难的文字对齐问题。
实现效果如下图所示。
![](https://i-blog.csdnimg.cn/blog_migrate/9e2cf0ef514154492867a44db279cbb8.png)
两行长度不定的文字,要让它们总体水平居中,然后,这两行字要左对齐,如下图所示。
![](https://i-blog.csdnimg.cn/blog_migrate/c3bab3092125d10f6854550a0583ca41.png)
听起来好像挺简单,然而实现起来却。。。。。。
错误做法一:
用一个大块div包住两个div,在大div中设置"text-align:center; ",在小div中设置"text-align:left; "
结果如下图所示。
![](https://i-blog.csdnimg.cn/blog_migrate/946cc27f958fb57f35838e050ee85b54.png)
因为div会占据一整行,而不能随内容大小自动调节宽度,如果要对大div设置width,这也不好控制,因为万一文段长度改变,那么还是无法实现居中。
错误做法二:
于是我把小div改成span,因为span是行内元素,能随span内的文段宽度来调节自身宽度。结果如下图所示。
![](https://i-blog.csdnimg.cn/blog_migrate/7e3287f4abc3c8f77b2f25a67beb5236.png)
因为span自动调节自身宽度(即span宽度等于文段长度),所以"text-align:left; "对它不起作用。
正确做法:
既然块级元素和行内元素都无法实现该效果,那能否折中采取介于它们之间的元素。
对,就是设置"display:inline-block;"。
效果图如下:
![](https://i-blog.csdnimg.cn/blog_migrate/db724679287a3790cd13c9117b33619a.png)
思路:在一个大div中放置一个小div,小div中包含2个span文段。大div设置"text-align:center; ",让小div居中; 小div设置"display:inline-block;",这样小div就能有行内元素的特性,会根据内容自动调节自己的宽度,再设置"text-align:left; ",让其中的元素左对齐,这样就搞定了。
Tip:小div中的span元素可替换为div等块级元素,小div可替换为span等行内元素。
html代码如下:
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<div id="container"> <div id="child-container"> <span class="text">请尽快付款以保证商家能及时提供服务</span><br/> <span class="text">未支付订单将在半个小时后关闭</span> </div> </div>
<div id="container"> <div id="child-container"> <span class="text">请尽快付款以保证商家能及时提供服务</span><br/> <span class="text">未支付订单将在半个小时后关闭</span> </div> </div>
css代码如下:
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
*{ 2 margin: 0; 3 padding: 0; 4 } 5 #container { 6 text-align: center; 7 background-color: #DBEDFD; //这三句只是为了美观,请忽略。。。 8 height: 40px; 9 padding: 15px 0; 10 } 11 #child-container { 12 text-align: left; 13 display: inline-block; 14 }
1 *{ 2 margin: 0; 3 padding: 0; 4 } 5 #container { 6 text-align: center; 7 background-color: #DBEDFD; //这三句只是为了美观,请忽略。。。 8 height: 40px; 9 padding: 15px 0; 10 } 11 #child-container { 12 text-align: left; 13 display: inline-block; 14 }