QQ 1640076782
几个并排的li高度不固定，如果其中一个li高度与其他不一致，会出现错位现象，如下图：
这个时候该如何解决呢，是一个头疼的问题，通常可以在要换行时候加一个清除浮动可以解决，但是这样培加了太多代码，其实通过CSS也可以解决这个问题的，下面来看看方法。
通常元素并排，我们会用到浮动float,这里我们不再使用浮动，我们用display:inline-block;这个css属性也可以达到同样的效果，不过仅仅是这个也是不可以的，我们还必须给外层元素固定宽度，来看一下具体代码：
<div id=”btinfo”>
<ul>
<li><span id=”btit”>ご注文について</span>
<span id=”btnr”>ご注文はヤマダモールOSHAREYAより365日24時間受け付けております。
オンラインでのお取引のみ承っておりますので、恐れ入りますがお電話等でのご注文は致しかねます。ご注文はヤマダモールOSHAREYAより365日24時間受け付けております。
オンラインでのお取引のみ承っておりますので、恐れ入りますがお電話等でのご注文は致しかねます。ご注文はヤマダモールOSHAREYAより365日24時間受け付けております。
オンラインでのお取引のみ承っておりますので、恐れ入りますがお電話等でのご注文は致しかねます。ご注文はヤマダモールOSHAREYAより365日24時間受け付けております。
オンラインでのお取引のみ承っておりますので、恐れ入りますがお電話等でのご注文は致しかねます。</span> </li>
<li><span id=”btit”>商品の在庫について</span>
<span id=”btnr”>当店は複数店舗を経営しており、在庫を共有しておりますので、ご注文のタイミングにより在庫にずれが生じることがあります。そのため、在庫数更新が間に合わずご注文頂いた商品が欠品となる場合もございます。お客様に大変ご迷惑をお掛けする場合がございますが、あらかじめご了承くださいませ。</span> </li>
<li><span id=”btit”>個人情報の取り扱いについて</span>
<span id=”btnr”>当店ではお客様とのお取引で得た個人情報は専属スタッフのみで管理し、厳重に取り扱っております。お客様の個人情報は裁判所、警察機関等、公共機関からの提出要請があった場合以外の第三者に譲渡または利用することは一切ございません。また、ご注文送信等にはSSLで暗号化するシステムを採用しておりますので、お客様の個人情報が他から見られる心配はございません、どうぞご安心してお買い物をお楽しみくださいませ。</span> </li>
<li><span id=”btit”>お支払いについて</span></li>
</ul>
</div>
CSS：
<style type=”text/css”>
body{
font-size:11px;
font-family:Tahoma;
}
#btinfo {border:solid 1px #e3e2ea; border-top:none;}
#btinfo ul {overflow:hidden;}
#btinfo ul li {display:inline-block;vertical-align:top;padding:10px 14px; width:450px;}
#btinfo ul li span {display:block;}
#btinfo ul li span#btit {padding-left:16px; height:30px; line-height:30px; font-weight:bold; border-bottom:solid 2px #ddd; color:#2b2b2b;}
#btinfo ul li span#btnr {padding:10px 5px; line-height:22px;}
</style>
正确的效果：
注意li的样式display:inline-block;vertical-align:top;这两个是必不可少的，否则会出问题！看起来很简单，但是很实用，耐用兼容性也是很不错的！
xueposter@gmail.com