-1

我想要实现的是边栏中的 h1 标签下方的边框底部 20px，并且边框底部下方还有 20px 的“空白”。我还想在我的内容区域中的 h1 标签下面有这个。

这是我现在拥有的 HTML 的链接：

<!-- SIDEBAR -->
<div id="sidebar">
<h1>Caul / Cbua</h1>

<div class="sidetext">
Lorem ipsumdolor sit amet, consectetur adipiscing elit. Nam laoreet mi c est dignissim, at auctor mi tristique.
</div>

<h1>Commit</h1>
<div class="sidelink">
<ul>
  <li><a href="#">Lorem Ipsum</a></li>
  <li><a href="#">Lorem Ipsum</a></li>
  <li><a href="#">Lorem Ipsum</a></li>
      <li><a href="#">Lorem Ipsum</a></li>
</ul>
</div>

</div>

<!-- CONTENT -->
<div id="content">
<h1>News</h1>

<div class="article">
<img class="articleimg" src="../../Slicing Images/news images/caul.png" width="84" height="65" alt="caul" />

<h2>Lorem Ipsum</h2>
<h3>Friday, August 16th</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a leo in lacus tempor egestas. Maecenas faucibus neque nisi, eu condimentum enim porta id. Suspendisse blandit sem tellus. Vivamus tristique, nunc faucibus pulvinar fringilla, sem ipsum molestie libero, id rhoncus turpis quam sit amet quam. </p>
</div>

<div class="article">
<img class="articleimg" src="../../Slicing Images/news images/caul.png" width="84" height="65" alt="caul" />

<h2>Lorem Ipsum</h2>
<h3>Friday, August 16th</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a leo in lacus tempor egestas. Maecenas faucibus neque nisi, eu condimentum enim porta id. Suspendisse blandit sem tellus. Vivamus tristique, nunc faucibus pulvinar fringilla, sem ipsum molestie libero, id rhoncus turpis quam sit amet quam. </p>
</div>
</div>

CSS：

#sidebar {
background-color: #e7d9c9;
    background-image: url('/imgs/map.png');
    background-repeat: no-repeat;
    position: absolute;
    /* # */
    height: 100%;
width: 318px;
float: left;
padding-bottom: 20px;
padding-top: 20px;
}

#sidebar h1 {
border-bottom: thick;
border-bottom-width: 75%;
}

.sidetext {
    padding: 5px 20px;
    font-size: 18px;
    font-family: Helvetica Neue;
    padding-bottom: 20px;
}

.sidelink {
    padding-bottom: 20px;
    margin: 0;
    padding: 0; 
    width:300px;
}

.sidelink ul {
    margin: 0; 
    padding: 0;
    margin-left: 20px;
}

.sidelink li {
    display: block;
    list-style: none;
}

.sidelink li a {
    display:block;
    font-family: Helvetica Neue;
    font-size:16px;
    color:#FFF;
    text-decoration:none;
    background-color:#1e416f;
    padding:5px;
    border-left:10px solid #FFF;
    padding-bottom: 20px;
}

.sidelink li a:hover {
    border-left:14px solid #1e416f;
    background-color:#e7d9c9;
    color: #1e416f;
}

h5 {
    font-family: Helvetica Neue: Light;
    font-size: 24px;
    color: #517f9c;
}

/* Content */
#content {
width: 642px;
float: right;
padding-top: 20px;
}

.article {
    padding: 5px 20px;
}

.articleimg {
    float: left;
    padding-right: 25px;
}
4

4 回答 4

1 
h1 {
    border-bottom: 20px solid #000000;
}

和

h1 {
    margin: 0 0 20px 0;
}

或者

h1 {
    margin-bottom: 20px;
}

结合这两个规则......所以更像这样：

h1 {
    margin: 0 0 20px 0;
    border-bottom: 20px solid #000000;
}
于 2013-08-23T13:30:42.760 回答
1

试试这个，看看你怎么样

#sidebar h1 { border-bottom: 1px solid black; margin-bottom: 20px; }
于 2013-08-23T13:31:45.673 回答
0

试试这个 CSS：

div > h1 { border-bottom: 20px solid black; margin-bottom: 20px; }
于 2013-08-23T13:30:38.420 回答
0 
#sidebar h1 { border-bottom: 20px solid black; margin-bottom: 20px; }

如果你想要它为所有 h1

h1 { border-bottom: 20px solid black; margin-bottom: 20px; }
于 2013-08-23T13:35:23.573 回答