Question

我正在尝试使用百分比或像素设置颜色类的div的宽度，但我没有这样做。

＆＃13;

var colors = ["RED", "GREEN", "BLUE", "YELLOW", "PURPLE"];
for (var h = 0; h <= 4; h++) {
  for (var i = 0; i <= colors.length - 1; i++) {
    var element = "<div class='colors' id='color" + i + "'>" + colors[i] + "</div>";
    var sample = "sahdkj";
    $('#gameContainer').append(element);
  };
  $('#gameContainer').append("<br/><br/>");
}

＆＃13;

body {
  margin: 10px;
}

.container {
  border: 2px solid #e7e7e7;
  border-radius: 3px;
  width: 407px;
}

.colors {
  display: inline;
  border: 1px solid black;
  width: 20%;
  position: relative;
  top: 10px;
  bottom: 10px;
  margin: 10px;
  padding: 5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="container" id="gameContainer">

  </div>
</body>

＆＃13;

Answer 1

将display: inline;更改为display: inline-block;

＆＃13;

var colors = ["RED", "GREEN", "BLUE", "YELLOW", "PURPLE"];
for (var h = 0; h <= 4; h++) {
  for (var i = 0; i <= colors.length - 1; i++) {
    var element = "<div class='colors' id='color" + i + "'>" + colors[i] + "</div>";
    var sample = "sahdkj";
    $('#gameContainer').append(element);
  };
  $('#gameContainer').append("<br/><br/>");
}

＆＃13;

body {
  margin: 10px;
}

.container {
  border: 2px solid #e7e7e7;
  border-radius: 3px;
  width: 500px;
}

.colors {
  display: inline-block;
  border: 1px solid black;
  width: 20%;
  position: relative;
  top: 10px;
  bottom: 10px;
  margin: 10px;
  padding: 5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" id="gameContainer">

</div>

＆＃13;

Answer 2

问题是display: inline;，您无法设置width或height 要内联元素，例如<span>，请改用display: inline-block;。

这是您的更新代码。

＆＃13;

var colors = ["RED", "GREEN", "BLUE", "YELLOW", "PURPLE"];
for (var h = 0; h <= 4; h++) {
  for (var i = 0; i <= colors.length - 1; i++) {
    var element = "<div class='colors' id='color" + i + "'>" + colors[i] + "</div>";
    var sample = "sahdkj";
    $('#gameContainer').append(element);
  };
  $('#gameContainer').append("<br/><br/>");
}

＆＃13;

body {
  margin: 10px;
}

.container {
  border: 2px solid #e7e7e7;
  border-radius: 3px;
  width: 407px;
}

.colors {
  display: inline-block;
  border: 1px solid black;
  width: 20%;
  position: relative;
  top: 10px;
  bottom: 10px;
  margin: 10px;
  padding: 5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="container" id="gameContainer">

  </div>
</body>

＆＃13;

Answer 3

尝试以下代码width，height，padding，margin无法在内联元素上正常运行CSS display: inline;设置的内容

.colors {
        display: inline-block; /*Modified line*/
        border: 1px solid black;
        vertical-align:top; /* added line, best practice when you apply "display: inline-block;" */
        width: 20%;
        position: relative;
        top:10px;
        bottom: 10px;
        margin:10px;
        padding: 5px;
    }

Answer 4

将 .colors 类内嵌的显示属性更改为内嵌块

内联块元素类似于内嵌元素，但它们可以具有宽度和高度。

Answer 5

更改显示：内联; - ＆GT; display：inline-block;

无法设置div的宽度

5 个答案: