css a 标签上下间距_css标签栏实现自适应间距且上下对齐

最新推荐文章于 2023-05-31 14:43:36 发布

没有心的人

最新推荐文章于 2023-05-31 14:43:36 发布

阅读量674

点赞数

文章标签： css a 标签上下间距

本文链接：https://blog.csdn.net/weixin_36013931/article/details/113053290

版权

1、html

<html>
 <div className="Menuoptions">
    <ul>
       <li className={"123" === "123" ? "LiHighlight" : ""} title="吃">
          <div className="Menuoptions_li_img"><img src={item.img} alt="" /></div>
          <div className="Menuoptions_li_name">吃</div>
       </li>    
       <li className={"124" === "123" ? "LiHighlight" : ""} title="喝"}>
          <div className="Menuoptions_li_img"><img src={item.img} alt="" /></div>
          <div className="Menuoptions_li_name">喝</div>
       </li>    
    </ul>
 </div>
<html/>

2、css

.Menuoptions {
    height: 60px;
    background: #ffffff;
    display: inline-block;
}

.Menuoptions ul {
    overflow: hidden;
    display: inline-block;
}

.Menuoptions ul li {
    width: 80px;
    height: 60px;
    line-height: 1;
    color: #D4DDE7;
    float: left;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    user-select: none
}

.Menuoptions ul li:hover {
    background: #BBDEFB;
}

.Menuoptions .LiHighlight {
    background: unset !important;
    border-bottom: 3px solid #3385ff;
}

.Menuoptions_li_img {
    margin-bottom: 3px;
}

.Menuoptions_li_img img {
    width: 26px;
    height: 26px;
}

.Menuoptions_li_name {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
}

3、效果

效果图

没有心的人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css a 标签上下间距_css标签栏实现自适应间距且上下对齐

1、html<html> <div className="Menuoptions"> <ul> <li className={"123" === "123" ? "LiHighlight" : ""} title="吃"> <div className="Menuoptions_li_img">...
复制链接

扫一扫