gpt4 book ai didi

html - HTML/CSS 中的 div block 放置

转载 作者:太空宇宙 更新时间:2023-11-03 19:57:12 24 4
gpt4 key购买 nike

我做了这个演示:https://jsfiddle.net/qtpsqchq/1/

代码片段:

#dashboardHeader {
color: white;
background-color: #42637B;
border: 1px solid black;
}
#dashboardTabs {
margin: 0 auto;
width: 50%;
}
.dashboardTab {
color: white;
background-color: #39556A;
border: 1px solid black;
padding-left: 25px;
padding-right: 25px;
margin: 3px;
float: left;
}
<body>
<title>Dashboard</title>

<div id="dashboardBox">

<div id="dashboardHeader">
<h1 align="center">Dashboard</h1>
</div>

<div id="dashboardTabs">
<div class="dashboardTab">
<h3>1</h3>
</div>
<div class="dashboardTab">
<h3>2eq</h3>
</div>
<div class="dashboardTab">
<h3>3</h3>
</div>
</div>

<div id="dashboardContent">

</div>

</div>

</body>

我想要的是获得这个结果:http://s4.postimg.org/x6p45agq4/maquette.jpg

但是方 block 并没有像我希望的那样居中,第 3 个正方形应该居中。

另一件奇怪的事情,如果我在“dashboardTabs”周围放置边框,边框不会围绕“dashboardTab”组(注意我写了“dashboardTabs”和“dashboardTab”)。

这是为什么?

谢谢。

最佳答案

您可以在包装 div 上使用 text-align center,并将标签 div 设置为内联 block 元素,如下所示:

https://jsfiddle.net/qtpsqchq/3/

#dashboardTabs {    
width:100%;
text-align:center;
}

.dashboardTab {
display:inline-block;
}

有了这个,边框就会出现,因为我们已经删除了 float 属性。

关于html - HTML/CSS 中的 div block 放置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33894640/

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