Question

我正在尝试创建一个为3个列表项构建的动态无序列表，但该列表中可能有一个或两个项目。我的问题是，当UL中有一个或两个项目时，我的内容会向上移动。我怎么能避免这个？

HTML：

 <html><head>
    <title>Dashboard</title>
</head>
<body>
    <div id="wrapper">


      <div id="colDow">
                <div id="colLef">
            <ul id="days">

        <div id="colRig">
            <ul class="format" id="schedule1">
            <li> Event 3</li>
              <li>test this space</li>
              <li>fit everthing and beyond</li>
          </ul>
            <ul class="format" id="schedule2">
            <li> Event 3</li>
              <li>test this space</li>
              <li>fit everthing and beyond</li>
          </ul>
            <ul class="format" id="schedule3">
     <li> Event 3</li>
              <li>test this space</li>
              <li>fit everthing and beyond</li>
          </ul>
        </div><!-- Bottom Right Time -->
   </div>
</div>

CSS：

   body {
    padding:0;
    margin:0;
    background-color:#000;
    font-size:100%;
    }

    #wrapper {
    margin-left:auto;
    margin-right:auto;
    width:100%;
    height:100%;
    max-width:2560px;
    max-height:1440px;
    }



#colDow {
    width:55.46%;
/* 710/1280 */

    float:left;
    height:88.75%;
/*  710/800 */
}

#colLef {
    width:35.21%;
/* 250/710 */
    float:left;
    height:100%;
}

#days {

    list-style-type:none;
    padding-left:0px;

    }

#days li {
    font-size:2.25em;
    color:#fff;
    font-family:'Lato',sans-serif;
    font-weight:lighter;
    margin:0 0 168px;
    background:#575757;
    display:block;
    text-align:center;
    height:40px; 
    margin-top:6px;
    margin-bottom: 168px;
}


#colRig {
/*  background:#fff; */
    width:63.09%;
    float:right;
    height:100%;
}

.format {
/*  background:red; */
    margin-top: 46px;
    padding-bottom: 6px;
}

.format li {
    color:#fff;
    font-family:'Lato',sans-serif;
    font-weight:lighter;
    font-size:1.5em;
/*  font-size: 1.846em; */
    height: 52px;
}

如果删除第一次出现的“Event3”项目，则向上移动

Answer 1

标记

<div class="event-listing">
        <ul>
            <li>
                <a>List 1</a>
                <ul>
                    <li>
                        <a>Event 3
                        </a>
                    </li>
                    <li>
                        <a>test this space
                        </a>
                    </li>
                    <li>
                        <a>fit everything and beyond
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <a>List 2</a>
                <ul>
                    <li>
                        <a>Event 3
                        </a>
                    </li>
                    <li>
                        <a>test this space
                        </a>
                    </li>
                    <li>
                        <a>fit everything and beyond
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <a>List 3</a>
                <ul>
                    <li>
                        <a>Event 3
                        </a>
                    </li>
                    <li>
                        <a>test this space
                        </a>
                    </li>
                    <li>
                        <a>fit everything and beyond
                        </a>
                    </li>
                </ul>
            </li>
        </u>
    </div>

CSS

.event-listing ul li {
  list-style: none;
}

这是我从菜单中理解的。如果我错了，请告诉我

Answer 2

.event-listing ul { min-height：100px //设置最小高度 }

设置最小高度，以便列表区域不会向上移动。抱歉代码不在标签中。我现在正在移动。

避免列表中的项目移位

2 个答案: