Question

我想要实现的是在我的侧边栏中我的h1标签下方的边框底部20px，并且在我的边框底部下方还有20px的“空白空间”。我也希望在我的内容区域中将其放在我的h1标签下面。

Here's the link to what I have now 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;
}

Answer 1

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

和

h1 {
    margin: 0 0 20px 0;
}

OR

h1 {
    margin-bottom: 20px;
}

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

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

Answer 2

试试这个，看看你怎么走

#sidebar h1 { border-bottom: 1px solid black; margin-bottom: 20px; }

Answer 3

试试这个CSS：

div > h1 { border-bottom: 20px solid black; margin-bottom: 20px; }

Answer 4

#sidebar h1 { border-bottom: 20px solid black; margin-bottom: 20px; }

如果你想要所有h1

h1 { border-bottom: 20px solid black; margin-bottom: 20px; }

不确定如何在CSS中使用border-bottom

4 个答案: