当我把它放在行内块时，我不能水平放置我的颜色 div 请问有什么问题吗？答案

【问题标题】：I can't put my color div horizontally when I put it in inline block what's the problem please?当我把它放在行内块时，我不能水平放置我的颜色 div 请问有什么问题吗？
【发布时间】：2023-01-18 19:56:15
【问题描述】：

.color {
  width: 22px;
  height: 22px;
  display: inline-block;
  margin-right: 10px;
}

https://codepen.io/Devops-Issam/pen/oNMGree

我创建了一个颜色 div 来水平调用多种颜色，所以我将它放在 inline-block 中，但它拒绝水平移动到我的链接上方。我试图找到问题但没有成功我的印象是告诉我颜色的整个左侧都被阻止了

【问题讨论】：

标签： html css

【解决方案1】：

给父颜色元素 width: 100% 。但我会在这种情况下使用 display: flex 。

【讨论】：

【解决方案2】：

请分享整个代码，这样我也可以检查 HTML

【讨论】：

请不要发布 cmets 作为答案

【解决方案3】：

将 width: auto; 应用于父元素（您需要为此使用另一个类、另一个选择器或内联 CSS）以允许它变得与其内容一样宽。

【讨论】：

【解决方案4】：

我修好了，问题是你的容器有颜色，颜色有相同的类名，在你的例子中是“颜色”，我给了父元素类 .colors。

代码：

<article>
        <h2>Converse Chuck Taylor All Star Low Top</h2>
        <img
          src="https://i.imgur.com/ZrTU3VK.jpeg"
          alt="jpeg"
        />
        <p><strong>$65.00</strong></p>
        <p class="free">Free shipping</p>
        <p>
          Ready to dress up or down, these classic canvas Chucks are an everyday
          wardrobe staple.
        </p>
  
        <a
          class="link"
          href="#"
          >More information &rarr;
        </a>
        <div class="colors">
          <div class="color color-black"></div>
          <div class="color color-blue"></div>
          <div class="color color-red"></div>
          <div class="color color-yellow"></div>
          <div class="color color-green"></div>
          <div class="color color-brown"></div>
        </div>
        <h3>Product details</h3>
        <ul>
          <li>Lightweigh, durable canvas sneaker</li>
          <li>Lightly padded footbed for added comfort</li>
          <li>Iconic Chuck Taylor ankle patch.</li>
        </ul>
        <button>Add to cart</button>
      </article>





/* GENERAL */
* {
    margin: 0;
    padding: 0;
  }
  
  body {
    font-family: sans-serif;
    line-height: 1.4;
  }
  
  /*CONTAINER SECTION*/
  article {
    width: 825px;
    margin: 50px auto;
    border: 4px solid black;
  }
  
  /* TITLE */
  h2 {
    padding: 15px;
    background-color: #f7f7f7;
    text-align: center;
    text-transform: uppercase;
    font-size: 22px;
    position: relative;
  }
  
  h2::before {
    content: "sale";
    font-size: 12px;
    position: absolute;
    left: -35px;
    top: -25px;
    text-transform: uppercase;
    background-color: red;
    color: #fff;
    padding: 10px;
    font-weight: bold;
  }
  
  /* MAIN */
  img {
    width: 250px;
    height: 250px;
  }
  
  strong {
    font-size: 24px;
  }
  
  .free {
    color: #777;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 12px;
    margin-bottom: 20px;
  }
  
  .link:link,
  :visited {
    color: black;
    display: inline-block;
    margin-bottom: 30px;
  }
  .link:hover,
  :active {
    text-decoration: none;
  }
  .color {
    width: 22px;
    height: 22px;
    display: inline-block;
    margin-right: 10px;
  }
  
  .color-black {
    background-color: #000;
  }
  .color-blue {
    background-color: blue;
  }
  .color-red {
    background-color: red;
  }
  .color-yellow {
    background-color: yellow;
  }
  .color-green {
    background-color: green;
  }
  .color-brown {
    background-color: brown;
  }
  
  h3 {
    text-transform: uppercase;
    font-size: 16px;
    margin-bottom: 30px;
  }
  
  li {
    list-style: square;
    margin-left: 20px;
    margin-bottom: 10px;
  }
  
  /* MAIN BUTTON */
  button {
    background-color: #000;
    border: none;
    color: #fff;
    width: 100%;
    border-top: 4px solid black;
    text-transform: uppercase;
    font-size: 20px;
    cursor: pointer;
    padding: 15px;
  }
  
  button:hover {
    background-color: white;
    color: black;
  }

【讨论】：