在 CSS 中, max-width
屬性用於設定元素的最大寬度。此屬性對於確保元素不超過指定寬度特別有用,尤其是當視口或父容器較窄時。
以下是使用max-width
的基本語法:
CSSselector { max-width: value; }
px
)、em( em
)、百分比 (%) 或其他有效的 CSS 長度單位。例如,如果要將 ID 為「example」的元素的最大寬度設為 500 像素,則可以使用下列 CSS:
CSS #example {
max-width: 500px;
}
這可確保元素的寬度不會超過 500 像素,無論實際內容寬度為何。
下面是一個帶有 HTML 片段的簡單範例:
html <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
max-width: 800px;
margin: 0 auto; /* Center the container horizontally */
padding: 20px;
background-color: #f0f0f0;
}
</style>
<title>Max-width Example</title>
</head>
<body>
<div class="container">
<!-- Your content goes here -->
<p>This is an example with a maximum width of 800 pixels.</p>
</div>
</body>
</html>
在此範例中, .container
類別具有max-width
個 800 像素,確保它不會超出該寬度,並且使用margin: 0 auto;
在視窗中居中。根據您的具體要求調整數值。