html文本元素和div使用遇到问题

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设置过后，样式恢复正常。

 

3  html&css中的文字对齐问题

 

html&css的使用过程中，我们经常会遇到很多文字对齐问题。下面我要介绍一个有丁点难的文字对齐问题。

实现效果如下图所示。

 

两行长度不定的文字，要让它们总体水平居中，然后，这两行字要左对齐，如下图所示。

听起来好像挺简单，然而实现起来却。。。。。。

 

错误做法一：

用一个大块div包住两个div，在大div中设置"text-align:center; "，在小div中设置"text-align:left; "

结果如下图所示。

因为div会占据一整行，而不能随内容大小自动调节宽度，如果要对大div设置width，这也不好控制，因为万一文段长度改变，那么还是无法实现居中。

 

错误做法二：

于是我把小div改成span，因为span是行内元素，能随span内的文段宽度来调节自身宽度。结果如下图所示。

因为span自动调节自身宽度（即span宽度等于文段长度），所以"text-align:left; "对它不起作用。

 

正确做法：

既然块级元素和行内元素都无法实现该效果，那能否折中采取介于它们之间的元素。

对，就是设置"display:inline-block;"。

效果图如下：

思路：在一个大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代码如下：

<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代码如下：

*{
 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 }

 

转载于:https://www.cnblogs.com/xiafeiyong/p/8921670.html