HTML / CSS-边框长度

Question

我正在尝试创建一个包含4个部分的页面，其中包含链接列表。 我已将每个部分的左右边框设置为1px solid black 。

问题是这些边界仅延伸到我内容的长度。 我一直无法找到一种方法来让它们扩展页面的整个长度。 我一直在寻找的相关主题涉及底线。

抱歉，冗长的代码，但是我不确定如何真正将其缩短很多，仍然显示所需的内容：

 div.container { display: inline-block; background-color: rgb(0, 56, 0); max-width: 100%; border: 1px solid black; } a:link { color: rgb(0, 68, 255); background-color: transparent; text-decoration: aqua; } a:visited { color: rgb(27, 164, 255); background-color: transparent; text-decoration: none; } a:hover { color: red; background-color: transparent; text-decoration: underline; } a:active { color: yellow; background-color: transparent; text-decoration: underline; } header.jira { padding: 1em; color: white; background-color: black; clear: left; text-align: center; } footer { padding: 1em; color: white; background-color: black; clear: left; text-align: center; } h2 { color: goldenrod; font-size: 200%; text-align: center; padding: 10px; } ul { color: black; list-style-type: disc; padding-left: 20px; } section.wiki { float: left; max-width: 220px; border-left: 1px solid black; border-right: 1px solid black; margin: 1; padding-right: 5px; } section.monitoring { float: left; max-width: 220px; border-left: 1px solid black; border-right: 1px solid black; margin: 1; padding-right: 5px; } section.adminui { float: left; max-width: 220px; border-left: 1px solid black; border-right: 1px solid black; margin: 1; padding-right: 5px; } section.other { float: left; max-width: 220px; height: to-bottom; border-left: 1px solid black; border-right: 1px solid black; margin: 1; padding-right: 5px; } 

 <body> <div class="container"> <header class="jira"> <h1 style="color: white">Useful Links</h1> </header> <section class="wiki"> <h2>Wiki</h2> <ul> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> </ul> </section> <section class="monitoring"> <h2>Monitoring</h2> <ul> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> </ul> </section> <section class="adminui"> <h2>AdminUI</h2> <ul> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> </ul> </section> <section class="other"> <h2>Other</h2> <ul> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> </ul> </section> <footer>footer</footer> </div> </body> 

monitoring和adminui部分的边框一直向下延伸，但是wiki和other部分不会导致行的长度不完整。 当然，我知道我可以从wiki右边和other左边删除边框，这看起来还可以，但是我希望这样做是适当的，以防将来我必须添加更多链接。

---

如何使各节的左右边框延长页面的整个长度？

Answer 1

对布局使用flex而不是float，元素都将具有相同的高度，因此所有边框都将延续到最后：

 div.container { display: inline-block; background-color: rgb(0, 56, 0); max-width: 900px; border: 1px solid black; display:flex; flex-wrap:wrap; } a:link { color: rgb(0, 68, 255); background-color: transparent; text-decoration: aqua; } a:visited { color: rgb(27, 164, 255); background-color: transparent; text-decoration: none; } a:hover { color: red; background-color: transparent; text-decoration: underline; } a:active { color: yellow; background-color: transparent; text-decoration: underline; } header.jira { padding: 1em; width:100%; color: white; background-color: black; text-align: center; } footer { padding: 1em; color: white; background-color: black; text-align: center; width:100%; } h2 { color: goldenrod; font-size: 200%; text-align: center; padding: 10px; } ul { color: black; list-style-type: disc; padding-left: 20px; } section.wiki { flex:1; max-width: 220px; border-left: 1px solid black; border-right: 1px solid black; padding-right: 5px; } section.monitoring { flex:1; max-width: 220px; border-left: 1px solid black; border-right: 1px solid black; padding-right: 5px; } section.adminui { flex:1; max-width: 220px; border-left: 1px solid black; border-right: 1px solid black; padding-right: 5px; } section.other { flex:1; max-width: 220px; border-left: 1px solid black; border-right: 1px solid black; padding-right: 5px; } 

 <body> <div class="container"> <header class="jira"> <h1 style="color: white">Useful Links</h1> </header> <section class="wiki"> <h2>Wiki</h2> <ul> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> </ul> </section> <section class="monitoring"> <h2>Monitoring</h2> <ul> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> </ul> </section> <section class="adminui"> <h2>AdminUI</h2> <ul> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> </ul> </section> <section class="other"> <h2>Other</h2> <ul> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> <li><a href="https://somelink.com" target="_blank">Some Page</a></li> </ul> </section> <footer>footer</footer> </div> </body> 

Answer 2

如果您定义每个部分的高度（无论最长的部分是什么，并且使所有部分的高度都相同，则边框应匹配）。

因此，在每个CSS部分。*，您需要定义高度。

高度：#px；

将＃替换为最长部分的实际高度，短区域将使用定义的高度和边框。 您将不得不摆弄它以获得完美的像素数，但然后在所有高度下都使用该数字。

希望这可以帮助。