Question

我正在尝试用边框线制作这个精确的方框。你可以在H2之后看到有新的边界线然后是一个段落。请告诉我该怎么做？就像我使用border-bottom:1px solid时一样，它只会形成一条直线，但不会触及主边框的边缘。在这里，我附上了图片，以便您可以更好地理解这里，您可以看到image

我的代码

    <div class="col-sm-8 col-sm-offset-2" id="house">
            <h3 class="text">Our house packages include:</h3>

            <ul class="lead text" id="list">
            <li>Standard site costs (based on 500mm fall to site & ‘M’ Class slab)</li>
            <li>Rainwater Tank or connection to recycled water where available.</li>
            <li>Concrete driveway (up to 55sqm)</li>
            <li>Tiled Front Porch</li>
            <li> Internal Floor Coverings</li>
            <li> 5+ star gas instantaneous HWS</li>
            <li>Wall & Ceiling insulation</li>
            <li>‘Classic’ range of inclusions</li>
            </ul>
             <img src="images/landing.jpg" alt="landing Image">
<p class="note">NB. Please note that all packages are subject to developer and/or council and statutory authorities’ approvals.</p>
    </div>
    </div>

CSS

#house {
border: 1px solid black;
background:white;
}

#house h3 {
border-bottom:1px solid;
font-size:28px;
font-weight:bold;
margin:10px;
}

#list {
font-size:15px;
margin:15px;
padding:15px;
position:relative;
right:20px;
text-align:left;

}

#house img {
width:40%;
position:relative;
left:500px;
bottom:260px;
}

请告诉我如何在标题之后和列表之后创建边框线。请看一下图片。它应该是响应。

谢谢大家

Answer 1

我认为你的代码顶部缺少一个div标签，所以我无法调试。：/

但如果我必须做同样的事情，这就是我解决它的方式：

<style>

    html { 
        background: #EEE;
        width: 100%;
        height: 100%;
        border: 0;
        text-align: center;
        padding: 40px;
        box-sizing: border-box;
        color: #AAA;
        font-family: calibri;
    }

    .box{
        background: #FFF;
        border: 2px solid #DDD;
        width: 80%; /*SPECIFY WIDTH HERE*/
        display: inline-block;
    }

    .heading {
        border-bottom: 2px solid #DDD;
        width: 100%; 
        padding: 20px; 
        text-size: 30px;
        font-size: 30px;
        box-sizing: border-box;
        display: inline-block;
    }

    .content {
        border-bottom: 2px solid #DDD;
        width: 100%;
        padding: 20px; 
        box-sizing: border-box;
        display: inline-block;
    }

    .footer {
        width: 100%;
        padding: 20px; 
        box-sizing: border-box;
        display: inline-block;
    }

    .myList {
        display: inline-block;
        text-align: left;
        padding: 10px;
    }

    li {
        margin: 10px 0;
    }

    .myImg {
        display: inline-block;
        padding: 10px;
    }

    .houseImg {
        width: 300px;

    }

</style>

    <div class='box'>
        <div class='heading'>
        Our house packages include:
        </div>

        <div class='content'>
            <div class='myList'>
                 <ul class="lead text" id="list">
                    <li>Standard site costs (based on 500mm fall to site & 'M' Class slab)</li>
                    <li>Rainwater Tank or connection to recycled water where available.</li>
                    <li>Concrete driveway (up to 55sqm)</li>
                    <li>Tiled Front Porch</li>
                    <li> Internal Floor Coverings</li>
                    <li> 5+ star gas instantaneous HWS</li>
                    <li>Wall & Ceiling insulation</li>
                    <li>'Classic' range of inclusions</li>
                </ul>
            </div>
            <div class='myImg'>
                <img src='http://www.simplyeleganthomedesigns.com/hudson%20cottage%20FL.jpg' class='houseImg'>
            </div>
        </div>
        <div class='footer'>
            Some Footer text here
        </div>
    </div>

Answer 2

1-边界位于img边距内，为什么有空格。尝试使用padding for h3

padding: 20px;

我也为你修复了这个列表。校验 jsfiddle

Answer 3

h3无法正常工作的原因是因为您为其指定了margin: 10px;这会将h3边框10px推离其父级所有面。如果您未指定margin，border-bottom将正常工作。

最好为所有元素添加边框，以便查看每个css规则如何影响元素框。

有关详细信息，请参阅框模型

W3C Box Model

MDN Box Model

带边框线的响应框

3 个答案: