Question

我开始使用HTML和CSS 我在页面上有一个div元素，它不会填满整个页面在它里面有一个ul元素和一些列表项我想从div元素的顶部放置227px列表，但是我无法完成这个 - 它推动它更多。
此外 - 列表项之间我想要40像素的边距，但它也做更多有什么问题？
这是我的代码：
HTML：

<body>
    <div class="Hashta">
        <div class="Menu">
            <ul id="MenuItems">
              <li><a href="#" >ONE</a></li>
              <li><a href="#" >TWO</a></li>
              <li><a href="#" >THREE</a></li>
              <li><a href="#" >FOUR</a></li>
            </ul>
        </div>
    </div>
</body>

CSS：

body {
   background-color: Gray;
}
.Hashta{
   width:874px;
   height:650px;
   background-color:black;
   margin: auto auto 50px auto;
   border-radius: 20px;
   border: 3px solid darkgray;
   moz-box-shadow: 2px 2px 10px black;
   webkit-box-shadow: 2px 2px 10px black;
   box-shadow: 2px 2px 10px black;
}
.Menu {
   margin-top: 227px;
   padding-right: 50px;
   float:right;
}

#MenuItems {
   list-style:none;
}
#MenuItems li {
   text-align:center;  
   position:relative;  
   padding: 4px 10px 4px 10px;  
   margin-right:30px;  
   margin-bottom: 40px;  
   border:none;  
}

#MenuItems li a{
   width: 280px;
   height: 70px;
   background-color: green;
   color:White;
   font-family:Arial, Helvetica, sans-serif;  
   font-size:24px;  
   display:block;  
   outline:0;  
   text-decoration:none;  
   text-shadow: 1px 1px 1px #000;
   line-height: 70px;  
}

如果您想测量像素，可以安装：http://www.mioplanet.com/products/pixelruler/ （点击旋转）
谢谢！

Answer 1

您应该通过重置所有元素来开始您的样式，以便每个浏览器显示它们相同。

你可以检查那里的众多CSS重置库中的一个，但是为了开始这样的事情已经很好了：

* {
  margin: 0;
  padding: 0;
}

这在CSS样式表中首先出现，将删除每个元素的所有边距和填充，因此您可以稍后在所需的元素中添加它们。

<强>更新如果要在该代码之后恢复一些元素边距或填充（例如在正文中），只需在之前的一个之后写一个新规则，如

body {
  padding:10px; /* Add 10px to body only */
}

Answer 2

每个列表项的总高度为高度+填充+边框+边距。

将#MenuItems li的填充更改为：

 padding: 0 10px 0 10px;

请参阅http://jsfiddle.net/NGLN/rBjrD/1/

Answer 3

尝试绝对定位：

.Hashta{
   width:874px;
   height:650px;
   background-color:black;
   margin: auto auto 50px auto;
   border-radius: 20px;
   border: 3px solid darkgray;
   moz-box-shadow: 2px 2px 10px black;
   webkit-box-shadow: 2px 2px 10px black;
   box-shadow: 2px 2px 10px black;
   position:relative;
}
.Menu {
       position:absolute;
       top:227px;
       right:0;
       padding-right: 50px;
       float:right;
    }

Answer 4

为margin:0; padding:0

添加body

在#MenuItems li替换：

padding: 4px 10px 4px 10px;

使用：

margin: 4px 10px 4px 10px;

这将使按钮之间的距离等于40px。

Answer 5

试试这个：

<style> 
body {
   background-color: Gray;
}
.Hashta{
   width:874px;
   height:650px;
   background-color:black;
   margin: auto auto 50px auto;
   border-radius: 20px;
   border: 3px solid darkgray;
   moz-box-shadow: 2px 2px 10px black;
   webkit-box-shadow: 2px 2px 10px black;
   box-shadow: 2px 2px 10px black;
}
.Menu {
   margin-top: 227px;
   padding-right: 50px;
   float:right;
}

#MenuItems {
   list-style:none;
}
.secLi{
   text-align:center;  
   position:relative;  
   padding: 0px 10px 0px 10px;  
   margin-right:30px;  
   margin-top: 40px;  
   border:none;  
}
.firstLi{
   text-align:center;  
   position:relative;  
   padding: 0px 10px 0px 10px;  
   margin-right:30px;  
   margin-top: -16px;  
   border:none;  
}

#MenuItems li a{
   width: 280px;
   height: 70px;
   background-color: green;
   color:White;
   font-family:Arial, Helvetica, sans-serif;  
   font-size:24px;  
   display:block;  
   outline:0;  
   text-decoration:none;  
   text-shadow: 1px 1px 1px #000;
   line-height: 70px;  
}
</style>

<body>
    <div class="Hashta">

        <div class="Menu">
            <ul id="MenuItems">
              <li class="firstLi"><a href="#" >ONE</a></li>
              <li class="secLi"><a href="#" >TWO</a></li>
              <li class="secLi"><a href="#" >THREE</a></li>
              <li class="secLi"><a href="#" >FOUR</a></li>
            </ul>
        </div>
    </div>
</body>

CSS保证金问题

5 个答案: