gpt4 book ai didi

css - 如何在不知道其宽度的情况下将 block 元素居中?

转载 作者:行者123 更新时间:2023-11-28 13:48:58 25 4
gpt4 key购买 nike

下面的代码在 1280x800 下工作正常,但是,如果我添加另一个缩略图,<ul> 的宽度变得等于 <body>宽度和 <ul>不再居中。我不想指定 <ul>宽度,这将解决问题。无论分辨率如何,我都希望缩略图占据所有可用空间,但同时左右边距相等。是否有任何纯 CSS 方法可以在不计算 <ul> 的情况下执行此操作每次加载页面或使用 CSS3 媒体查询时 JavaScript 中的宽度?

<html>
<head>
<title>Gallery</title>
<style type="text/css" media="screen">
body {
text-align: center;
}
ul {
padding: 0;
display: inline-block;
list-style-type: none;
}
li {
float: left;
width: 200px;
background-color: violet;
}
</style>
</head>
<body>
<ul>
<li>thumbnail</li>
<li>thumbnail</li>
<li>thumbnail</li>
<li>thumbnail</li>
<li>thumbnail</li>
<li>thumbnail</li>
</ul>
</body>

最佳答案

您仍然可以使用列表,方法是将“display: inline-block”添加到 li 元素本身

<html>
<head>
<title>Gallery</title>
<style type="text/css" media="screen">
body {
text-align: center;
}
ul {
padding: 0;
list-style-type: none;
width:100%;
}
li {
width: 200px;
display:inline-block;
background-color: violet;
}
</style>
</head>
<body>
<ul>
<li>thumbnail</li>
<li>thumbnail</li>
<li>thumbnail</li>
<li>thumbnail</li>
<li>thumbnail</li>
<li>thumbnail</li><li>thumbnail</li>
</ul>
</body>​​​​​
</html>

关于css - 如何在不知道其宽度的情况下将 block 元素居中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3381648/

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