Question

我正在为葡萄酒销售业务设计一个网上商店，我正在尝试列出我们从3个项目中获得葡萄酒的所有葡萄酒厂的列表，并以页面为中心。

正在发生的事情是，li在某种程度上被对齐，浮动，定位，移动或其他东西到ul的右侧，即使我没有定义任何'right- {anything}'。我的红色边框也不起作用，但这对以后来说是一个问题。

这是我的HTML：

<div id="overall">
<div class="maincontent">
<h1>Wineries</h1>
    <div id="winerytable">
    <p><img alt="Red box around cell" src="images/wineries/redboxsml.png" /> - These Wineries only sell to their Wine List. You need to obtain a spot on their lists to receive their wine.</p>
        <ul class="winerieslist">
            <li><a href="https://mywebsite.com/collections/Adamant-Cellars"><img alt="Adamant Cellars Image" src="images/wineries/Adamant Cellars.png" height="300px" /><br />Adamant Cellars</a></li>
            <li class="redborderlistitem"><a href="https://mywebsite.com/collections/aMaurice-Cellars"><img alt="aMaurice Cellars Image" src="images/wineries/aMaurice Cellars.png" height="300px" /><br />aMaurice Cellars</a></li>
            <li><a href="https://mywebsite.com/collections/Amavi-Cellars"><img alt="Amavi Cellars Image" src="images/wineries/Amavi Cellars.png" height="300px" /><br />Amavi Cellars</a></li>
            <li><a href="https://mywebsite.com/collections/Adamant-Cellars"><img alt="Adamant Cellars Image" src="images/wineries/Adamant Cellars.png" height="300px" /><br />Adamant Cellars</a></li>
            <li class="redborderlistitem"><a href="https://mywebsite.com/collections/aMaurice-Cellars"><img alt="aMaurice Cellars Image" src="images/wineries/aMaurice Cellars.png" height="300px" /><br />aMaurice Cellars</a></li>
            <li><a href="https://mywebsite.com/collections/Amavi-Cellars"><img alt="Amavi Cellars Image" src="images/wineries/Amavi Cellars.png" height="300px" /><br />Amavi Cellars</a></li>
        </ul>
    </div>
</div>

这是我的CSS：

#overall {
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
    background-color: #FFF;
}

.maincontent {
    padding-left: 10px;
    padding-right: 10px;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
}

.maincontent a:link, a:visited {
    color: #000;
    font-size: 14px;
}

.maincontent a:hover, a:active {
    color: #609;
    text-decoration: underline;
}

.maincontent ul {
    font-weight: bold;
    list-style-type: none;
    padding-bottom: 40px;
}

.maincontent li {
    padding-top: 40px;
    width: 200px;
    text-align: center;
    float: left;
}

#winerytable {
    float: left;
    padding-right: 10px;
}

.winerieslist {
}

.winerieslist ul {
    float: left;
}

.winerieslist li {
    background-image: url('images/wineries/listitembg.png');
    width: 310px;
}

.redborderlistitem {
    border: 5px;
    border-color: #F00;
}

如果我错过了一些非常简单的事情，我很抱歉，但是我一直在试图让我的头发集中。提前感谢你给出的任何答案！

哦，在你发表评论之前：是的，我意识到某些css没有被使用或完成。这个css还有其他页面使用，这个页面还没有完成。

Answer 1

默认元素ul有填充。

添加此行ul { padding:0px }

你会看到变化。

Here is an example

<ul>向右浮动，但没有浮动：右; s已定义</ul>

1 个答案: