HTML / CSS - 边框长度

时间：2018-01-01 20:33:54

标签： html css

我正在尝试创建一个包含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左侧的边框，它看起来没问题，但我希望它适当，以防我将来要添加更多链接。

如何让我的部分的左右边框延伸到页面的整个长度？

2 个答案:

答案 0 :(得分：4)

使用flex作为布局而不是浮动，元素将具有相同的高度，因此所有边框将持续到结尾：

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>

答案 1 :(得分：-2)

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

所以在每个css部分。*你需要定义高度。

身高：#px;

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

希望这有帮助。

相关问题
最新问题