2

h1 に下線を引こうとしているのに、写真の後ろ (左側) に下線を引こうとしているという問題があります。下線をページの最後まで伸ばしたいです。これが私のコードです： 

HTML:
<div id="content">
<img src="http://imageshack.us..."/>
    <h1>About me</h1
        <p>Info about me....</p>
    <h2>Contact info</h2>
        <p>Phone:my number</p>
        <p>Email: my email</p>
</div>

CSS:

#content  {
    padding: 5px 10px 5px 0px;
    margin: 10px 10px 10px 0px;
}

#content img {
    float: left;
    margin: 0px 10px 10px 0px;
}

#content h1 {
    font-size: 26px;
    margin: 15px 0px 5px 0px;
    border-bottom: 5px solid black;
}

注：私は初心者のコーダーです。これが不可能な場合、またはこれを行う他の方法がある場合はお知らせください。

4

3 に答える 3

6

これを行う：

#content h1 {
    font-size: 26px;
    margin: 15px 0px 5px 0px;
    border-bottom: 5px solid black;
    display: inline-block;
}

これにより、コンテンツにのみ下線が引かれます。全線ではありません。

于 2013-04-20T03:26:18.693 に答える
2

これが発生する理由は、に幅を設定していないためですh1。したがって、当然、ページ幅全体が拡張されます。これを解決するには、widthプロパティを追加します。これは、コードが今どのように見えるかです

#content h1 {
  font-size: 26px;
  margin: 15px 0px 5px 0px;
  border-bottom: 5px solid black;
  width:200px; /*Change this to whatever value that you want*/
}

フィドル

inline-block他の人が述べているように、上でも使用できますh1。これは通常、すべてを と同じ行に配置しますがh1、そのp下にあるため、そうではありません。pdisplay:block;

フィドル

于 2013-04-20T04:27:11.723 に答える