化妝登記表。
面臨兩個問題。
- 窄螢屏上靠近單詞“registration”的線條（偽元素）在單詞“registration”上閉合。
- 姓氏欄位不會關閉。
這是它在寬螢屏上的樣子（沒問題）：
我不知道第一個問題如何解決。我嘗試了min-widthand選項max-width，但它對我沒有幫助。也許我做錯了什么。
第二個問題顯然是用flex-wrap屬性解決的，但是把它放在哪里合適呢？
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
body {
background: #F2F3F7;
}
a {
text-decoration: none;
color: green;
}
.wrapper-form {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.main-label {
font-weight: bold;
font-size: 40px;
margin-bottom: 16px;
}
.main-text {
font-size: 20.5px;
margin: 22px 22px;
}
.register-form {
display: flex;
flex-direction: column;
min-width: 40%;
}
.main-top {
margin-top: 20px;
}
.main-input-container {
display: inherit;
justify-content: space-between;
}
.main-input {
height: 65%;
border-radius: 5px;
padding: 15px;
border-color: gainsboro;
}
.register-button {
padding: 10px;
font-weight: bold;
font-size: 18px;
border-radius: 5px;
background: #55AD56;
color: white;
border-color: #55AD56;
}
.main-label-container {
text-align: center;
width: 80%;
margin: 0 auto;
overflow: hidden;
}
.main-label-container .main-label {
position: relative;
}
.main-label-container .main-label::before {
content: '';
display: block;
min-width: 17.5%;
position: absolute;
border-bottom: 2px solid #D0D1D5;
top:50%;
right: 24%;
}
.main-label-container .main-label::after {
content: '';
display: block;
min-width: 17.5%;
position: absolute;
border-bottom: 2px solid #D0D1D5;
top:50%;
left: 24%;
}<!DOCTYPE html>
<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">
<link rel="stylesheet" href="./assets/css/reset.css">
<link rel="stylesheet" href="./assets/css/style.css">
<title>Registration form</title>
</head>
<body>
<main>
<section class="wrapper-form">
<div class="main-label-container">
<h1 class="main-label">Register</h1>
</div>
<p class="main-text">Create your account. It's free and only takes a minute.</p>
<form action="#" method="get" class="register-form">
<section class="main-input-container">
<input type="text" name="name" class="main-input main-top" placeholder="First Name" required>
<input type="text" name="surname" class="main-input main-top" placeholder="Last Name" required>
</section>
<input type="email" name="email" class="main-input main-top" placeholder="Email" required>
<input type="password" name="password" class="main-input main-top" placeholder="Password" required>
<input type="password" class="main-input main-top" placeholder="Confirm Password" required>
<label>
<input type="checkbox" name="accept" class="main-top" value="trueAccept">
I accept the <a href="#">Terms of Use</a> & <a href="#">Privacy Policy</a>.
</label>
<button type="submit" class="register-button main-top">Register Now</button>
</form>
</section>
</main>
</body>
</html>uj5u.com熱心網友回復：
一種方法如下：
/* defining common styles as CSS custom properties for
ease of re-use throughout the project: */
:root {
--themeColor: #343;
--themeAccentColor: green;
--minWidth: 10em;
--maxWidth: 600px;
--fontSize: 1rem;
--fontScale: 1;
--gapX: 1em;
--gapY: 0.5em;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
/* using CSS font shorthand to define, in order:
font-weight, font-size, line-height, font-families;
the CSS calc function multiplies the --fontSize property
by the --fontScale property to produce the result for
the font-size: */
font: normal calc(var(--fontSize) * var(--fontScale)) / 1.5 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
body {
background: #F2F3F7;
}
a {
text-decoration: none;
color: var(--themeAccentColor);
}
main {
color: var(--themeColor);
display: flex;
flex-direction: column;
/* vertically centering the content within
the element: */
justify-content: center;
/* defining the vertical spacing (top/bottom)
using the --gapY property, and the
horizontal spacing (left/right) using the
--gapX property: */
gap: var(--gapY) var(--gapX);
/* using logical properties to define the margin
of the block axis (top/bottom in ltr languages): */
margin-block: 1em;
/* using logical properties to define the margin
of the inline axis (left/right in ltr languages): */
margin-inline: auto;
min-height: 100vh;
/* using the CSS clamp function to define the minimum
size of the element (--minWidth * 2; note that this
_does not_ need to be wrapped in calc(), the maximum size
(--maxWidth) and the preferred (responsive) size of
60vw (sixy viewport-widths): */
width: clamp(var(--minWidth) * 2, 60vw, var(--maxWidth));
}
.main-label-container {
/* redefining the --fontScale property to give the font a
larger size, since the <h1> is here; realistically I'd
normally redefine on the <h1> explicitly but I chose
not to in this instance): */
--fontScale: 2;
display: flex;
/* to ensure the contents stretched across the main flex axis: */
justify-content: stretch;
/* vertically centering the content in the flex element's cross-axis: */
align-content: center;
/* note that we used 'em' as the units for these gap-properties,
so the --gapY and --gapX will be visually larger here because
the font of the current element is larger: */
gap: var(--gapY) var(--gapX);
}
.main-label-container::before,
.main-label-container::after {
content: '';
/* to ensure the pseudo-elements grow to take the maximum possible
space: */
flex-grow: 1;
/* using the currentColor keyword to set the border-color property
to use the color of the current element: */
border-bottom: 2px solid currentColor;
/* moving the pseudo-elements to the vertical center of its flex
parent element: */
align-self: center;
}
p {
text-align: center;
}
form {
display: grid;
/* we want to use a one-column grid, and to have that grid
take all of the available space, so we use 1 fractional-
unit to do so: */
grid-template-columns: 1fr;
gap: var(--gapY) var(--gapX);
}
form > section {
display: grid;
/* to allow the grid to adjust itself, we use the repeat() function
with the auto-fit keyword which will fit as many grid items to
a line as possible according to their size; to define the size of
the grid-columns we use the minmax() function, supplying the
--minWidth property (the minimum size the column is required to
be) and 1fr as the maximum size: */
grid-template-columns: repeat(auto-fit, minmax(var(--minWidth), 1fr));
gap: var(--gapY) var(--gapX);
}<main>
<section class="wrapper-form">
<div class="main-label-container">
<h1 class="main-label">Register</h1>
</div>
<p class="main-text">Create your account. It's free and only takes a minute.</p>
<form action="#" method="get" class="register-form">
<section class="main-input-container">
<input type="text" name="name" class="main-input main-top" placeholder="First Name" required>
<input type="text" name="surname" class="main-input main-top" placeholder="Last Name" required>
</section>
<input type="email" name="email" class="main-input main-top" placeholder="Email" required>
<input type="password" name="password" class="main-input main-top" placeholder="Password" required>
<input type="password" class="main-input main-top" placeholder="Confirm Password" required>
<label>
<input type="checkbox" name="accept" class="main-top" value="trueAccept">
I accept the <a href="#">Terms of Use</a> & <a href="#">Privacy Policy</a>.
</label>
<button type="submit" class="register-button main-top">Register Now</button>
</form>
</section>
</main>JS 小提琴演示。
參考：
align-content.align-self.display.calc().clamp().- CSS 自定義屬性。
flex-direction.gap.justify-content.margin-block.margin-inline.minmax().
參考書目：
- “網格完整指南”，CSS 技巧。
- “ CSS 網格布局”，MDN。
- “ Flexbox 完整指南”，CSS 技巧。
- “彈性盒的基本概念”，MDN。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/413033.html
標籤：