如何水平对齐我的盒子？
[英]How do i Horizontally align my boxes?
问题描述
我创造了3个盒子。 有UL / LI。 但它似乎并没有横向排列。
我试过了， float:right; 并display: inline-block; 两者都没有对齐。
预览图片
这是我的代码
#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>
基本上，此框将填充内容，并且必须水平对齐，其间具有相等的空格。 我试着谷歌搜索并按照一步一步的指导，但无济于事。
5 个解决方案
解决方案1
3 2018-08-09 11:18:52
您需要执行以下操作：
.boxy {
display: flex;
justify-content: space-between;
}
#box1, #box2, #box3 {
display: inline-block;
}
有关flex及其用途的更多详细信息，请访问https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 。 当您需要在页面上具有响应性，均匀分布的项目时，它是一个非常简洁的小工具。
解决方案2
3 已采纳 2018-08-09 11:24:13
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>
解决方案3
3 2018-08-09 11:25:30
问题是您没有更改这些<li>标签的显示类型。 需要将它们设置为display: inline-block; 。
所以基本上你可以从#box1 ， #box2和#box3取出display属性。 而是添加以下内容：
.boxy > li { display: inline-block; }
解决方案4
2 2018-08-09 11:22:06
您需要做的就是将以下内容添加到.boxy ：
text-align:center;
并更改属性display:inline-block to display:block in .boxy
亲眼看看，我已经在您的代码中编辑了上述内容，并且完美地运行了。
#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: block; text-align:center; }
<!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>
解决方案5
0 2018-08-09 11:10:29
您需要将li标签显示为内联块，这是因为浏览器默认所有li都是块类型元素。
.boxy > li {
list-style: none;
display: inline-block;
}
如何在这些框中水平对齐这些div？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.