Question

我当前项目的网址是（http://www.codesrce.com/drumitemstobuy），而我遇到的问题是，在我的主要文件中，列表项目没有居中。这是我的css的链接：（http://www.codesrce.com/drumitemstobuy/style.css），这是我的实际html：

HTML

 <html>

<head>

    <meta charset="utf-8">

    <title>Drum Items to Buy</title>

    <link rel="stylesheet" href="http://www.codesrce.com/drumitemstobuy/style.css" />

</head>

<body>

    <div id="Content">

        <h1>Drum Items to Buy</h1>

    </div>

         <ul id="List">

            <li class="bought"><a target="_blank" href="http://store.dwdrums.com/p/dwcp9002-2012-double-9002-series-pedal?pp=10" title="Bought for $600" class="boughtit"><span title=" ">DW 9000 Double Pedal</span></a></li>

            <li class="notbought"><a  target="_blank" href="http://store.dwdrums.com/p/9000-series-hi-hat-stand-2-leg?pp=10" title="$315" class="notboughtit"><span title=" ">DW 9500TB 2 Leg Hi Hat Stand</span></a></li>

            <li class="notbought"><a  target="_blank" href="http://store.dwdrums.com/p/heavy-duty-double-tom-stand?pp=10" title="$168" class="notboughtit"><span title=" ">Heavy Duty Double Tom Stand</span></a></li>

            <li class="notbought"><a  targte="_blank" href="http://store.dwdrums.com/p/dwcp9300al-9000-series-air-lift-snare-stand?pp=10" title="$210" class="notboughtit"><span title=" ">DW 9000 Series Air Lift Snare Stand</span></a></li>

            <li class="notbought"><a  target="_blank" href="http://sabian.com/en/cymbal/ch08-8-inch-vault-chopper" title="$140" class="notboughtit"><span title=" ">Sabian 8” Chopper</span></a></li>

            <li class="notbought"><a  target="_blank" href="http://sabian.com/en/cymbal/ch08-8-inch-vault-chopper" title="$340" class="notboughtit"><span title=" ">Sabian 14” AAX Stage Hats</span></a></li>

            <li class="notbought"><a  target="_blank" href="http://sabian.com/en/cymbal/21986x-19-inch-aax-x-treme-chinese" title="$265" class="notboughtit"><span title=" ">Sabian 19” AAX X-Treme Chinese</span></a></li>

            <li class="notbought"><a  target="_blank" href="http://sabian.com/en/cymbal/22014x-20-inch-aax-metal-ride" title="$280" class="notboughtit"><span title=" ">Sabian 20” AAX Metal Ride</span></a></li>

        </ul>

        <a href="#" id="AddButton">Add Item</a>

        <div id="Additem">

        </div>

</body>

</html>

我希望这些元素居中。

这是一个JSFiddle（http://jsfiddle.net/gPq36/）

Answer 1

删除ul

上额外的左侧填充

#List {
    padding-left: 0px
}

以下是演示：http://jsfiddle.net/2CLLd/

为什么我的<ul>的列表项不应该是它们的中心？</ul>

1 个答案: