Html 避免列表中的项目移动

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

HTML:

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

<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>

这是我从你们的菜单上了解到的。如果我错了，请告诉我。事件列表ul{ 最小高度：100px//设置最小高度 }

---

设置最小高度，使列表区域不会上移。对不起，代码不在标签中。我现在是手机用户。

问题在于代码，而不是第三方网站。问题在于您的标记。没有语义的日子已经过去了。HTML5带有语义元素。这意味着开发人员必须继续前进。@Arun这是我在构建这个网站时一直在考虑的事情。这不是你典型的网站。这是仪表板。没有菜单部分等。因此我选择了这个。这在HTML5语义元素中仍然可行吗？不需要。您可以使用ul层次结构进行dis。等5分钟，我挂一张demo@ArunAravind听起来不错。顺便说一下，我想你是对的。我其实可以用HTML5来做。这方面的一个例子是。尽管我不打算达到那个水平，但我的想法是，我正在努力实现的目标是可以做到的。基本上是的。这是我试图实现的一种简化方式。我不是从那个方面想的。这是我试图做的视觉表现：你可以通过将样式应用到li和a来完成。很简单，干净整洁。

   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;
}

<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>

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