Question

div {
    width: auto;
}

你好，我有一个关于宽度的小问题！这段代码自动修复了div的宽度，但有没有办法给它加上10个像素的上述自动宽度？我试过了width: auto + 10px但是没有用......

Answer 1

值自动将值设置为父容器的100％。如果您希望100% + 10px与auto + 10px相同，请使用calc。

＆＃13;

#parent{
  background-color: red;
  width: 100px;
  height: 100px;
}

#child{
  background-color: green;
  width: calc(100% + 10px);
  height: 50px;
}

＆＃13;

<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
</head>
<body>
  <div id="parent">
    <div id="child"></div>
  </div>
</body>
</html>

＆＃13;

Answer 2

解决OP的问题：

div {
  width: auto;
  padding: 0 5px; /* This would add a padding of 5px to both the left and the right of the div content box, which gives an additional 10px to the total width of the element. */
}

这可以胜任

有关详细信息：Introduction to the CSS box model

编辑（宽度：100％和宽度：自动之间的差异）

我对divs使用了相同的样式，但你可以看到差异。

.main{
  margin:auto;
  width: 70%;
  height: 300px;
  border: solid thin green;
}
.sub1{
  width: auto;
  height: 50px;
  margin: 20px;
  padding: 20px;
  color: white;
  background-color: blue;
  border: solid thin blue;
}
.sub2{
  width: 100%;
  height: 50px;
  margin: 20px;
  padding: 20px;
  color: white;
  background-color: black;
  border: solid thin black;
}

<div class="main">
  <div class="sub1">I'm Div with auto width</div>
  <div class="sub2">I'm Div with 100% width</div>
</div>

CSS div width auto

2 个答案: