gpt4 book ai didi

html - 我如何水平对齐我的盒子?

转载 作者:太空宇宙 更新时间:2023-11-04 13:40:04 24 4
gpt4 key购买 nike

我创建了 3 个盒子。通过 UL/LI。但它本身似乎并没有水平排列。

我试过了,float:right;display: inline-block; 都没有对齐。

Preview Image
这是我的代码

#box1 {
height: 300px;
width: 250px;
background-color: grey;
display: inline-block
}

#box2 {
height: 300px;
width: 250px;
background-color: grey;
display: inline-block
}

#box3 {
height: 300px;
width: 250px;
background-color: grey;
display: inline-block
}

.boxy {
list-style: none;
display: inline-block;
}
<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<meta charset="UTF-8">
<title>Askar Photography</title>
</head>

<body>
<header>
<h1 class="logo"><img src="Assets/logo.png"></h1>
<input type="checkbox" id="nav-toggle" class="nav-toggle">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<label for="nav-toggle" class="nav-toggle-label">
<span></span>
</label>
</header>

<div class="content">
<ul class="boxy">
<li>
<div id="box1"></div>
</li>
<li>
<div id="box2"></div>
</li>
<li>
<div id="box3"></div>
</li>
</ul>
</div>



</body>



<!--<div id="box2"></div> -->


</html>

基本上,此框将填充内容,并且必须水平对齐,中间的间距相等。我尝试使用谷歌搜索并按照分步指南进行操作,但无济于事。

最佳答案

use below code: it will help u  


<style>
#box1 {
height: 300px;
width: 250px;
background-color: grey;
display: inline-block;
margin-right:10px;

}

#box2 {
height: 300px;
width: 250px;
background-color: grey;
display: inline-block;
margin-right:10px;
}

#box3 {
height: 300px;
width: 250px;
background-color: grey;
display: inline-block
}

.boxy{
list-style: none;
display: flex;
width:100%;
}

</style>

关于html - 我如何水平对齐我的盒子?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51765154/

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