css 如何在< div>将其宽度调整为内容大小的同时居中?

rjee0c15  于 2022-11-19  发布在  其他
关注(0)|答案(2)|浏览(163)

请在此处查看我的代码:
https://www.w3schools.com/code/tryit.asp?filename=FFTMB6LPPZZ5
(You需要单击“运行”按钮查看结果)
我想要实现的是“insideDiv”(黄色div)将:
1.在“outsideDiv”(绿色div)内占用尽可能多的宽度。
1.在“outsideDiv”(同样是绿色div)内居中。
1.我希望最左边的“shortItem”(白色项)和“insideDiv”(黄色div)的左边框之间差距/空间与最右边的“shortItem”和“insideDiv”(黄色div)的右边框之间的间隙/空间完全相同(例如20 px)。
我如何才能做到这一点呢?如果您运行我的代码并调整显示部分的宽度,您会发现左右两侧的空间并不相同。
如果你想你可以改变我的例子,保存它使用图标在左上角附近的'主页'图标,并在这里给一个链接到固定的代码。
希望你能帮我,谢谢!
我的代码:
第一个
更新:
1.我不想更改“shortItem”项(白色项)的宽度。
1.下面的图像显示了我正在尝试解决的问题:
https://ibb.co/jDz92a

llycmphe

llycmphe1#

这是我用你的代码创建的一个fiddle。请检查这是否是你需要的

.outsideDiv {
  background-color: green;
  margin: auto;
  width: 50%;
  border: 1px solid black;
  text-align: center;
  padding: 5%;
}

.insideDiv {
  background-color: yellow;
  margin: 1%;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  border: 1px solid black;
  width: auto;
}

.shortItem {
  background-color: white;
  display: block;
  color: black;
  text-align: center;
  text-decoration: none;
  float: right;
  margin: 10px;
  padding: 10px 20px;
  border: 1px solid black;
  height: 30px;
  width: 100%;
  max-width: 120px;
}
hc8w905p

hc8w905p2#

我已经编辑了您的代码,您可以看到here

<!DOCTYPE html>
<html>
<head>
<style>
.outsideDiv {
  background-color: green;
  margin: auto;
  width: 50%;
  border: 1px solid black;
  text-align: center;
  padding: 20px;
  }

.insideDiv {
  background-color: yellow;
  margin:0 auto;
  width:100%;
  display: block;
  border: 1px solid black;
  }

.shortItem {
  background-color: white;
  display: block;
  color: black;
  text-align: center;
  padding: 7px 17px;
  text-decoration: none;
  float: right;
  margin: 10px;
  border: 1px solid black;
  height: 30px;
  width: 120px;
  }
.clear {
    clear:both;
}
</style>
</head>

<body>
<div class="outsideDiv">
  <div class="insideDiv">
    <div class="shortItem"></div>
    <div class="shortItem"></div>
    <div class="shortItem"></div>
    <div class="shortItem"></div>
    <div class="shortItem"></div>
    <div class="shortItem"></div>
    <div class="shortItem"></div>
    <div class="clear"></div> 
  </div>
</div>
</body>
</html>

这就是你要找的吗
关键编辑:
1.清除innerDiv内的浮动元素
1.使用margin:0自动使innerDiv居中

相关问题