css样式

wifi___

已于 2023-08-22 17:57:50 修改

阅读量66

点赞数

文章标签：前端 css

于 2023-08-11 16:53:49 首次发布

本文链接：https://blog.csdn.net/watermelonmelon_/article/details/132235961

版权

1.滑动条样式

display:block;
overflow:auto;
max-height:200px;

2.希望table能出现滑动的效果

<div class="fileList">
<table id="xxx" cellpadding="0" cellspacing="0"></table>
</div>

在这里插入图片描述

.fileList{
    margin-bottom: 40px;
    max-height: 260px;
    overflow: auto;
    display: block;
    width: 100%;
}

3.flex布局两端对齐,即：两端无空格

                <c:if test="${dbInfoList.size() <= 5}">
                    <ul class="test_range range_spaceMid">
                    <c:forEach items="${dbInfoList}" var="dbInfo" varStatus="flag">
                    <li data="${dbInfo.id}">${dbInfo.dbname}</li>
                    </c:forEach>
                    </ul>
                </c:if>

   ul{
    display: flex;
    flex-wrap: wrap;
   }
   .range_spaceMid{justify-content: space-between;}
   .range_spaceMid li:last-child{margin-right: 0px;}

4.让div中的文字两端对齐

text-align: justify;

5.超出部分省略号

{
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
}

6.图片显示

结果：无论原本图片是多大，都会按照250px*60来显示。

<div class="fa">
     <img class="logo" src="<%=logoTmp%>">
</div>

.fa{content:'';display:inline-block;position:relative;top:0;left:0;width:250px;height:60px;border-radius:6.75px;background:transparent no-repeat;align-self: center;}
.logo {width: 250px;height: 60px;border-radius: 4px;overflow: hidden;background: transparent;}