1

我正在做一个个人项目，但我在使用 div 时遇到了一些困难，它有一些我似乎无法解决的样式。它是我的用户界面顶部的一条细条，用户可以在其中对屏幕上显示的内容进行一些控制。保留非常重要（因此删除它不是一种选择）。如果它有帮助，我将使用 Eric Meyer 的 CSS Reset 作为规范器。

我的问题是 div 元素似乎有一些内在的边距或填充，我似乎无法在我的 css 中解决。我在这里放了一张照片供参考；div 是绿色的。

我需要使绿色的 div 元素更薄。如果我可以将它移到更靠近页面顶部的位置，将对布局有很大帮助。如果您有任何想法或看到我错过的东西，我将不胜感激。

绿色是有问题的 div。

我还包括该内容的 html 代码，如下所示：

<div class="new_entry_control_container">
    <p>You have <span class="credits">33 Credits</span> remaining.
        <span class="button">Add More Credits</span>
        <span class="button">Add More Items to Study List</span>

        <span class="pagination">&#60; 1 | 2 | 3 &#62;</span>
    </p>
</div>

以及适用于此处的 CSS：

div.new_entry_control_container {
background-color: green;
max-width: 900px;
margin-left: auto;
margin-right: auto;}

div.new_entry_control_container p {
    text-align: center;}

.credits {
    color: #ffd400;}

.button {
    background-color: #ffd400;
    color: #3a0091;
    border: none;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    padding: 1px 8px 4px 8px;
    margin: 10px 0px 0px 3px;}

.pagination {
    margin-left: 25px;
    font-size: 17px;}
4

2 回答 2

0

尝试：

div.new_entry_control_container{
  padding:0;
  /* more CSS here */
}
.credits{
  padding:0; margin:0;
  /* other CSS  here */
}
于 2013-09-10T23:56:26.213 回答
0

不确定它是否是由该绿色条的父元素的填充引起的。一种解决方法是使用负的“margin-top”。为了使它更薄（假设该条中只有一条线），请使用“height”和“line-height”。

所以css可能看起来像这样

div.new_entry_control_container {
  background-color: green;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;

  margin-top: -10px;
  height: 18px; line-height: 18px;
}

希望有帮助。

于 2013-09-11T00:00:04.673 回答