将宽度Contaner设置为仅跨越内容宽度弹性项目固定宽度和高度

发布于 2025-01-26 15:07:47 字数 2437 浏览 2 评论 0原文

如何调整Flex容器以仅跨越内容宽度（flex项目的宽度）。在此练习中，我将3个弹性项目（跨度）放在一个div容器中，并设置宽度和高度的跨度，并期望DIV仅占3跨度（不是整个线路）。如何调整，以使边框仅包装3个弹性项目。请有人告诉我

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  text-transform: capitalize;
  font-size: 16px;
  font-family: "Source Sans Pro", sans-serif;
}

h2 {
  font-family: "Montserrat", sans-serif;
  font-weight: 200;
  font-size: 36px;
  text-transform: uppercase;
  margin-bottom: 55px;
  letter-spacing: 1px;
}

.flex,
.quantity {
  display: flex;
  align-items: center;
}

section {
  overflow-x: auto;
}
section h2 {
  text-transform: capitalize;
  font-size: 24px;
  font-family: "Source Sans Pro", sans-serif;
  margin-bottom: 27px;
  font-weight: 300;
}
section h2 span {
  color: #00bcd4;
}
section table,
section tr,
section th,
section td {
  border: 1px solid #dfe5e8;
  border-collapse: collapse;
}

.quantity {
  border: 1px solid #dfe5e8;
}
.quantity div {
  text-align: center;
  color: #afb9be;
}

.minus,
.plus {
  width: 33px;
  height: 33px;
  background: #dfe5e8;
}
.minus:hover,
.plus:hover {
  cursor: pointer;
}

.item {
  width: 40px;
}

.quantity_col {
  width: 202px;
}
/*# sourceMappingURL=test_flex.css.map */

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;700&family=Source+Sans+Pro:wght@300;400&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="/css/test_flex.css" />
  </head>
  <body>
    <section>
      <h2>you have<span> 6 items </span>in your cart</h2>
      <table class="detail">
        <tr class="row">
          <td class="quantity_col">
            <div class="quantity">
              <div class="minus">+</div>
              <div class="item">1</div>
              <div class="plus">-</div>
            </div>
          </td>
        </tr>
      </table>
    </section>
  </body>
</html>

原文

how to adjust flex container to only span content width (width of flex items). In this excercise I put 3 flex item (span) in a div container and set width and height for span and expect div to only take up width of 3 span (not whole line). How to adjust so that border only wrap 3 flex item. Please someone show me

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  text-transform: capitalize;
  font-size: 16px;
  font-family: "Source Sans Pro", sans-serif;
}

h2 {
  font-family: "Montserrat", sans-serif;
  font-weight: 200;
  font-size: 36px;
  text-transform: uppercase;
  margin-bottom: 55px;
  letter-spacing: 1px;
}

.flex,
.quantity {
  display: flex;
  align-items: center;
}

section {
  overflow-x: auto;
}
section h2 {
  text-transform: capitalize;
  font-size: 24px;
  font-family: "Source Sans Pro", sans-serif;
  margin-bottom: 27px;
  font-weight: 300;
}
section h2 span {
  color: #00bcd4;
}
section table,
section tr,
section th,
section td {
  border: 1px solid #dfe5e8;
  border-collapse: collapse;
}

.quantity {
  border: 1px solid #dfe5e8;
}
.quantity div {
  text-align: center;
  color: #afb9be;
}

.minus,
.plus {
  width: 33px;
  height: 33px;
  background: #dfe5e8;
}
.minus:hover,
.plus:hover {
  cursor: pointer;
}

.item {
  width: 40px;
}

.quantity_col {
  width: 202px;
}
/*# sourceMappingURL=test_flex.css.map */

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;700&family=Source+Sans+Pro:wght@300;400&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="/css/test_flex.css" />
  </head>
  <body>
    <section>
      <h2>you have<span> 6 items </span>in your cart</h2>
      <table class="detail">
        <tr class="row">
          <td class="quantity_col">
            <div class="quantity">
              <div class="minus">+</div>
              <div class="item">1</div>
              <div class="plus">-</div>
            </div>
          </td>
        </tr>
      </table>
    </section>
  </body>
</html>

分享到QQ

分享到微博