gpt4 book ai didi

css - 如何修复 css 中的边框,使其仅出现在当前 div 上?

转载 作者:行者123 更新时间:2023-11-28 12:16:36 25 4
gpt4 key购买 nike

我有两个 div。一个是一组标题,应该显示为内联但应该展开。另一个 main-content div,下面的每个标题都有一组 div。我在主要内容 div 周围放置了一个边框,但浏览器在两个 div 的顶部呈现了这个边框。如何修复边框,使其仅出现在主要内容 div 上,为什么会发生这种情况? enter image description here

Plunker

代码:

<html>
<head>
<style type="text/css">
#main {
width: 80%;
height: 80%;
}
#headers {
width: 100%;
display: block;
}
#main-content {
border: 1px solid #f00;
}
.header{
text-align: center;
float: left;
display: inline;
width: 14%;
}
</style>
</head>
<body>
<div id="main">
<div id="headers">
<div class="header">
Header1
</div>
<div class="header">
Header2
</div>
<div class="header">
Header3
</div>
<div class="header">
Header4
</div>
<div class="header">
Header5
</div>
<div class="header">
Header6
</div>
<div class="header">
Header7
</div>
</div>
<div id="main-content">
main content
</div>
</div>
</body>
</html>

更新

  1. 当我放置 display:inline-block; 时它起作用了,但这是正确的做法吗?
  2. 如何在 #headers 周围放置边框?

最佳答案

使用 display:inline-block 解决了这些问题。

#headers
width:100%
border:1px solid blue
display:inline-block

.header
text-align:center
float:left
display:inline-block
width:14%

关于css - 如何修复 css 中的边框,使其仅出现在当前 div 上?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19134990/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com