开发者社区> 问答> 正文

li前面的原点和文字不对齐

li标签中有一个 a标签和span标签,我将a设置了display: inline-block 之后出现了下面的情况:
screenshot

li的原点和a标签的文字不对齐。
html代码如下:

<li>
  <a target="_blank" href="#">如何解决何解决何解决何解决何解决我国城市停车场悖</a>
  <span>10-28</span>
</li>

css如下:
li的样式

font-size: 8px;
line-height: 23px;
list-style-type: disc;
text-align: left;

a的样式:

li a {

color: #000;
display: inline-block;
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 75%;

}

li span {

color: #000;
float: right;
font-size: 12px;

}

展开
收起
杨冬芳 2016-06-07 18:36:44 2708 0
1 条回答
写回答
取消 提交回答
  • IT从业

    这个应该是浮动和行高导致的问题了。li的高度小于 a和span的高度,行高会影响高度。

    font-size 最小字号建议使用 12px,8px太小了,有些浏览器为了强调用户体验是禁止使用小于12号的字号的。

    既然 span 标签是浮动元素,那么可以为 a 标签设置 display:block 属性,然后设置 margin-right: 64px,另外,span需要前置,如:

    <li>
        <span>10-28</span>
        <a target="_blank" href="#">如何解决何解决何解决何解决何解决我国城市停车场悖</a>
    </li>

    display: inline-block 的时候,可以尝试使用 vertical-align: middle 来实现对齐

    2019-07-17 19:30:43
    赞同 展开评论 打赏
问答分类:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载