精华内容
下载资源
问答
  • HTML UL CSS边框样式(HTML UL CSS Border style)
    2021-06-09 07:57:50

    I have a little question concerning html-lists and CSS. I want to have a list (whit sublist) that looks like this (view the result by coping the code into http://htmledit.squarefree.com/):

    ul

    {

    border: 0px solid #90bade;

    }

    li

    {

    list-style-type:none;

    border: 1px solid black;

    }

    .lv1

    {

    margin:0px 0px 0px 10px;

    }

    • One
    • Sub
    • One

    But I would prefer to use html-code like this for the list:

    • One
      • Sub
    • One

    Unfortunately I cannot figure out, how to style the second list whit CSS in order to make it look like the first one. Does anyone know if it’s possible by only using CSS or do I have to make one big list and use classes (like in the first list) to get the desired layout?

    Thanks in advance

    更多相关内容
  • 其实我们不难发现,这个效果并不难,只是我们没有真正的动手做过而已,所以不知道怎么做,那么下面就是一个很好的实践,就让我们来谈谈用ul li如何实现边框重合,并附带鼠标经过效果。 最终效果图: 代码: 复制...
  • ul li边框问题

    千次阅读 2019-08-27 16:01:08
    .rt-box ul{ height: 28px; line-height: 28px; font-size: 13px; color: #999999; li{ border: 1px solid #EEF0F6; float: left; width: 48px; text-align: center; cursor: pointer; box-sizing: border-box } li....

    在这里插入图片描述
    .rt-box ul{
    height: 28px;
    line-height: 28px;
    font-size: 13px;
    color: #999999;

    li{
    border: 1px solid #EEF0F6;
    float: left;
    width: 48px;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box

    }
    li:nth-child(2n){
    border-left: none;
    border-right: none;
    }
    li:last-child{
    border-right: 1px solid #EEF0F6;
    }
    }
    div .rt-box li.active{
    background: #FFE3E7;
    color: #EF334E;
    border: 1px solid #FFE3E7;
    }
    li.active+li{
    border-left: 1px solid #FFE3E7;
    }

    展开全文
  • ul li 设置边框后,会产出重合的现象 解决办法就是给他设置margin去重复 li { width: 80px; height: 30px; border: solid 1px #dddddd; background-color: #ffffff; line-height: 30px; text-align: ...

    改ul li 设置边框后,会产出重合的现象

    解决办法就是给他设置margin去重复

    li {
            width: 80px;
            height: 30px;
            border: solid 1px #dddddd;
            background-color: #ffffff;
            line-height: 30px;
            text-align: center;
            font-size: 14px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #666666;
            margin:0px -1px 0px 0px ;    //设置margin(注意:哪边重合给哪边设置-1px)
          }
          .active {
            border: solid 1px #28b28b;
            margin:0px;                   //点击效果时margin取消
            color: #28b28b;
           
          }

    如图:

    展开全文
  • 假定有个列表,每个列表项都有一条底边线,但是最后一项不需要底边线,案例如下:使用:not() 最后一行li不添加边框/*使字体在所有设备上都达到最佳的显示*/html {-moz-osx-font-smoothing: grayscale;-webkit-font-...

    CSS3新增的:not()伪类选择符,匹配不含有选择符的元素。假定有个列表,每个列表项都有一条底边线,但是最后一项不需要底边线,案例如下:

    使用:not() 最后一行li不添加边框

    /*

    使字体在所有设备上都达到最佳的显示

    */

    html {

    -moz-osx-font-smoothing: grayscale;

    -webkit-font-smoothing: antialiased;

    text-rendering: optimizeLegibility;

    }

    /*

    给body添加阴影

    */

    body:before {

    content: "";

    position: fixed;

    top: -10px;

    left: 0;

    width: 100%;

    height: 10px;

    -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);

    -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);

    box-shadow: 0px 0px 10px rgba(0,0,0,.8);

    z-index: 100;

    }

    /*

    设置列表

    */

    .listItem {

    border: 1px solid red;

    }

    .listItem ul {

    width: 100%;

    overflow:hidden;

    }

    .listItem ul,listItem li {

    margin:0;

    padding:0;

    list-style:none;

    }

    .listItem li {

    margin-left:10px;

    }

    /*

    li 最后一个元素不添加边框

    */

    .listItem li:not(:last-child) {

    border-bottom:1px solid green;

    }

    /*

    与第一个li相连兄弟

    */

    .listItem li:first-child ~ li { border-left: 1px solid #666; }

    • 列表1
    • 列表2
    • 列表3
    • 列表4
    • 列表5
    展开全文
  • 123function createDiv() {var s1 = document.getElementById('s1');var item = s1.value;var hasChild = container.children.length ? true : false;if(hasChild){while(container.hasChildNodes()) //当div下还...
  • 本文作者:IMWeb 莫卓颖未经同意,禁止转载背景相信大家在做项目的过程中会经常遇到这样的一个需求,鼠标hover到某个元素的时候为这个元素添加边框,这个简单的需求仅需注意添加边框后不会对原有的位置造成布局的...
  • 列表ul li 专用样式

    千次阅读 2021-08-05 01:20:33
    列表ul li 专用样式DATE: 2016-11-10 / VIEWS: 1142主页级别的页面大部分的内容都是做在无序列表里面的,其庞大的使用规模,需要有完备的样式支持。ul{zoom:1} 这个样式包括下面两个是zoom在ul里的应用ul li{zoom:1;...
  • ul中的li浮动时,无论给外层div的class写背景,还是给ul写背景,都是没有效果的。这是因为li浮动时撑不起外层的高度。给li或者a加上display:block;也没有用。
  • 现有三个文件,分别为index.html,index.js,style.css,主体代码如下: index.html ... index.js new Vue({ el: "#app", data() { currentLi: 1 }, template: ` 1 2 3 `... } 效果图如下: 如何消除li边框带来的缝隙
  • 正如标题所言,新闻列表在一些以咨询或非咨询为主的门户网站上启到着重要的作用,它的布局也因此被大家所重视,下文是常用的新闻列表代码,感兴趣的朋友可以参考下哈,希望对大家有所帮助
  • 列表li边框重合问题

    千次阅读 2018-05-31 14:32:54
    在我们写东西的时候经常要用到ul,但是也经常会出现li边框重合的问题,如下图: 可以看到每个格子的右边框和下边框明显有边框重合现象,这样很影响美观。解决这个问题: 只要给每个li设置css属性 margin:0 0 -...
  • li添加边框border ,border合并问题

    千次阅读 2020-01-07 16:25:13
    图一 出现边框重合的问题 图二 需要达到的目的,...问题:ul有多个li,每个li有1像素的边框,那么中间会出现边框重合的问题,废话不多说,直接看下面如何解决边框重合 html <ul class="lifl clearfix"> &...
  • html中li标签中这条边线怎么添加的

    千次阅读 2021-06-11 04:05:40
    满意答案nyhskwzm2016.06.07采纳率:58%等级:8已帮助:3115人1、打开编辑测试的软件,设置一个div区域,li标签因为默认的需要换行,所以需要设置一个浮动点,float:left;使其靠左浮动对齐;主要代码如下:.ceshi{...
  • <!... ; charset=utf-8" /> 无标题文档 #orderlist ... <li class="liCheckBox"> type="checkbox" />全选</li>  <li class="OrderName">fds</li>  <li class="TemplateName">fds</li> </ul> </html>
  • css解决li边框重合问题

    千次阅读 2018-03-09 20:33:05
    ul { margin : 20 px ; width : 630 px ; overflow : hidden ; border-top : 1 px solid black ; } .test_m ul li { padding : 10 px 20 px 11 px 20 px ; box-sizing : border-...
  • 我相信只有CSS才能获得最接近的是从悬停元素的子项中删除悬停样式……这对父母没有帮助.li:hover {background-...}li:hover ul {background-color: white;font-weight: normal;}fnordbazfoobazfoognarfbazfoobaz...
  • css中li下边框盖住ul下边框问题

    千次阅读 2018-01-16 13:40:22
    在用ul标签做tab栏时,想实现ul一个底边框线是统一的颜色,在当前li上,要给li一个其他颜色的底边框线,盖住ul的底边框线。实现以下效果 灰线是ul的线,红线是li的线。我发现无论如何写,li的高度加上边框线的...
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ...m.
  • ulli之间间距问题

    千次阅读 2018-05-17 22:57:08
    初学jQuery的时候,写个竖条的导航样式发现ulli之间是有间距,我以为是li 样式中margin或者padding的问题后来发现并没有。查了网上之后发现是li的左边是的排序符号只是被隐藏起来了,ul在样式list-style:none;时...
  • li{//原本的li样式定义 float:left; width:23%; height:350px; margin:20px; background-color:white; border-radius:5px; } .middle>ul>li:hover{//给上面样式添加移入鼠标后的阴影效果 filter:...
  • jquery ul li 操作

    千次阅读 2017-12-04 11:54:40
    jquery ul li 操作
  • 去掉每一行最后一个li的外边框 1.给每个li起类名单独去掉;(不建议使用) 2.将ul稍微多设置一点宽度,在ul的父容器中设置正常宽度、高度,并写overflow:hidden; 3.ul无父元素时可给li写margin-left:-value;...
  • } 二、css的UL、ol、li样式 1.list-style-type 属性设置列表项标记的类型。 取值:disc 点| circle圆圈 | square正方形 | decimal数字 | decimal-leading-zero 十进制数| lower-roman 小写罗马文字| upper-roman 大写...
  • 边框 */ border : 1px solid #007ACC ; } .select-container li a { /* 使背景色占满一行 */ display : inline-block ; width : 100% ; color : #000000 ; text-indent : 5px ; /...
  • $(function () {$('ul li').addClass(function (i) { return i % 6 == 5 ? "ab" : ""; }); // 隔6行 空白。或者虚线$('.imglist li').after(function (i) {var css = "";if (i % 3 == 2) {css = "}return css;})...
  • 1.使用ul li会使其中的内容和使用p标签一样,是一个块级元素,会使内容自动分行,使用后它的内容的内边距距离边框较远 2.不适用ul li标签,内容是行内元素,它的内边距距离边框比较近 3.(复习)给标签a设置居中或...
  • } 执行后为: 二、css的UL、ol、li样式 1.list-style-type 属性设置列表项标记的类型。 取值:disc 点| circle圆圈 | square正方形 | decimal数字 | decimal-leading-zero 十进制数| lower-roman 小写罗马文字| upper...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 44,337
精华内容 17,734
关键字:

li ul 加边框