將寬度容器設置為僅跨越內容寬度 flex 項目固定寬度和高度
[英]set width contaner to only span content width flex item fixed width and height
問題描述
如何調整彈性容器以僅跨越內容寬度（彈性項目的寬度）。 在本練習中，我將 3 個彈性項目 (span) 放入一個 div 容器中，並為 span 設置寬度和高度，並期望 div 僅占用 3 個 span 的寬度（而不是整行）。 如何調整使邊框只包裹 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>
1 個解決方案
解決方案1
0 2022-05-06 03:02:24
據我了解，您希望邊框覆蓋到灰色 - 標志框。
嘗試改變
.quantity_col {
width: 202px;
}
並使寬度為 100%。
如何設置跨度的固定寬度
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.