Question

我使用css创建了一个名为“topbar”的样式。

代码如下：

.topbar:hover ul{ display: inline;}

.topbar {
    float: left;
    margin-left: 20px; 
    margin-right: 20px;
    font-family:"Georgia";
}
.topbar ul {
    display: none;
    top:30px;
    position: absolute; border-style:solid;
border-width:1px; background-color:white;}     
}


.clear {
    clear: both;
}

然后我去创建一个ul“网格”并允许鼠标悬停放大图像

    ul.grid, ul.grid > li {
    margin: 0;
    padding: 0;
}
ul.grid {

}
ul.grid > li {

    float: left;
    list-style-type: none;
    text-align: center;
    font-family:"Georgia", serif;
    padding-top:50px;
    padding-bottom:25px;
    padding-right:25px;
    padding-left:0px;

}
ul img:hover {     width: 200px;     height: 250px; }

我的HTML代码：

    <body>
<div class="topbar">
    <p>Title</p>

    <ul>
        <li><a href="C:\Users\chan0554\Desktop\AZ.html">A-Z</a></li>
        <li><a href="C:\Users\chan0554\Desktop\ZA.html">Z-A</a></li>
    </ul>
</div>

<div class="topbar">
    <p>Genre</p>

    <ul>
        <li><a href="C:\Users\chan0554\Desktop\action.html">Action</a></li>
        <li><a href="C:\Users\chan0554\Desktop\comedy.html">Comedy</a></li>
        <li><a href="C:\Users\chan0554\Desktop\animation.html">Animation</a></li>
        <li><a href="C:\Users\chan0554\Desktop\horror.html">Horror</a></li>
        <li><a href="C:\Users\chan0554\Desktop\drama.html">Drama</a></li>
    </ul>
</div>
    <div class="clear"></div>

<br />
<div id="videos">
<ul class="grid">
    <li>
        <p class="image"><a href="C:\Users\chan0554\Desktop\thor.html"><img src="http://3.bp.blogspot.com/-AGAaic1-yrM/TcWmj77lHzI/AAAAAAAAAkQ/K6zzSk1WgUY/s1600/thor-movie-poster-1.jpg" alt="Thor" width="175" height="200" /></a></p>
        <p class="name"><a href="C:\Users\chan0554\Desktop\thor.html">Thor</a></p>
        <p class="genre"><a href="C:\Users\chan0554\Desktop\thor.html">Action</a></p>
        <p class="format"><a href="C:\Users\chan0554\Desktop\thor.html">DVD</a></p>
        <p class="year"><a href="C:\Users\chan0554\Desktop\thor.html">2011</a></p>
    </li>
    <li>
        <p class="image"><a href="C:\Users\chan0554\Desktop\hangover.html"><img src="http://www.galacool.com/wp-content/uploads/2010/02/hangover2.jpg" alt="Hangover" width="175" height="200" /></a></p>
        <p class="name"><a href="C:\Users\chan0554\Desktop\hangover.html">Hangover</a></p>
        <p class="genre"><a href="C:\Users\chan0554\Desktop\hangover.html">Comedy</a></p>
        <p class="format"><a href="C:\Users\chan0554\Desktop\hangover.html">DVD</a></p>
        <p class="year"><a href="C:\Users\chan0554\Desktop\hangover.html">2009</a></p>
    </li>
</ul>
</div>
</body>

为什么我的“Thor”电影图像旁边有一个不需要的空间？

Answer 1

左侧空格必须是您放置它们的List的缩进。理想情况下，要删除此左缩进，您应该为“UL”将填充和边距设置为“0”。

这段小代码在这方面非常有效：

CSS 

#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
}


HTML

<div id="navcontainer">
<ul>
<li><a href="#">Milk</a>
   <ul>
   <li><a href="#">Goat</a></li>
   <li><a href="#">Cow</a></li>
   </ul>
</li>
<li><a href="#">Eggs</a>
   <ul>
   <li><a href="#">Free-range</a></li>
   <li><a href="#">Other</a></li>
   </ul>
</li>
</ul>
</div>

我如何解决<ul>的位置问题？</ul>

1 个答案: