0

我正在尝试创建一个为 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”项目，则会上移

4

2 回答 2

0

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

设置一个最小高度，这样您的列表区域就不会向上移动。抱歉代码不在标签中。我现在是手机。

于 2013-10-07T00:32:49.597 回答
0

标记

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

这是我从你的菜单中了解到的。让我知道我是否错了

于 2013-10-06T21:29:53.467 回答