Current Layout------------------- - Banner Row:Group - Column 1: Label Column 2: Input or Select Column 3: Button or Link - EndGroup - Banner Row:Group - Column 1: Label Column 2: Input or Select Column 3: Button or Link - EndGroup - Banner Row:Group - Column 1: Label Column 2: Input or Select Column 3: Button or Link - EndGroup我希望 Col1 （標簽）右對齊，固定寬度相等我希望 Col2 （輸入或選擇）大小相同，寬度固定我希望 Col3（按鈕或鏈接）左對齊我想減小窗口寬度以將 col 組件包裝到下一行，就像每列同時一樣body { display: flex; align-items: center; justify-content: center;}#box { flex-direction: column; justify-content: center; background-color: wheat; display: flex; border: 2px solid black; border-radius: 15px; border-color: black; padding: 20px 40px; margin: 10px 50px; box-shadow: 5px 10px 18px #888888;}#banner { display: flex; flex-direction: column; align-items: center; background-color: #0099cc; border-radius: 500px; padding: 10px 50px 0 50px; margin: 0 auto 10px auto;}#banner-text { font-size: 14px; text-align: center; color: white; margin-bottom: 15px;}.right { font-size: 10px; text-align: right;}#box input[type="tel"], input[type="email"], select { font-size: 100%; margin: 0 10px; width: 200px;}a:link { font-size: 12px; font-weight: bold; text-decoration: none; align-self: center;}a:hover { text-decoration: underline; color: blue;}.button { box-sizing: border-box; display: flex; align-items: center; justify-content: center; font-size: 16px; width: 150px; border: 2px solid #0099cc; background-color: #0099cc; color: #ffffff; border-radius: 15px; text-decoration: none; outline: none;}.button:hover { border: 2px solid white; color: #ffffff; padding: 5px 10px;}.button:disabled { border: 1px solid #999999; background-color: #cccccc; color: #666666;}textarea { font-size: 18px; height: 250px; width: 100%;}label { font-weight: bold;}
1 回答
犯罪嫌疑人X
TA貢獻2080條經驗 獲得超4個贊
這里有一個機會給你。根據(jù)你所說的你想要的，在我看來 css grid 是更好的選擇。
因此，我添加了 css 網(wǎng)格作為grid-template-columns: max-content max-content 1fr;列，它會在您創(chuàng)建新行時添加新行。
我使用了包裝 div ( .grid>div) display: contents，盡管所有主要瀏覽器尚未完全支持它，但解決方法就是刪除包裝 div，因為無論如何網(wǎng)格都會處理其余部分。
body {
display: flex;
align-items: center;
justify-content: center;
}
#box {
flex-direction: column;
justify-content: center;
background-color: wheat;
display: flex;
border: 2px solid black;
border-radius: 15px;
border-color: black;
padding: 20px 40px;
margin: 10px 50px;
box-shadow: 5px 10px 18px #888888;
}
#banner {
display: flex;
flex-direction: column;
align-items: center;
background-color: #0099cc;
border-radius: 500px;
padding: 10px 50px 0 50px;
margin: 0 auto 10px auto;
}
#banner-text {
font-size: 14px;
text-align: center;
color: white;
margin-bottom: 15px;
}
.right {
font-size: 10px;
text-align: right;
}
#box input[type="tel"],
input[type="email"],
select {
font-size: 100%;
margin: 0 10px;
/*width: 200px;*/
}
a:link {
font-size: 12px;
font-weight: bold;
text-decoration: none;
align-self: center;
}
a:hover {
text-decoration: underline;
color: blue;
}
.button {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
width: 150px;
border: 2px solid #0099cc;
background-color: #0099cc;
color: #ffffff;
border-radius: 15px;
text-decoration: none;
outline: none;
}
.button:hover {
border: 2px solid white;
color: #ffffff;
padding: 5px 10px;
}
.button:disabled {
border: 1px solid #999999;
background-color: #cccccc;
color: #666666;
}
textarea {
font-size: 18px;
height: 250px;
width: 100%;
}
label {
font-weight: bold;
}
.group {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.grid {
display: grid;
grid-template-columns: max-content max-content 1fr;
}
.grid>div {
display: contents;
}
.grid>div>:first-child {
justify-self: flex-end;
}
@media only screen and (max-width: 600px) {
.grid {
grid-template-columns: 1fr;
}
.grid>div>:first-child {
justify-self: flex-start;
}
}
<div id="box">
<div id="banner">
<img src="https://www.google.com/logos/doodles/2020/thank-you-public-health-workers-and-to-researchers-in-the-scientific-community-6753651837108753-law.gif" alt="Banner" width="300" height="92" />
<h3>Header Text</h3>
</div>
<div class="grid">
<div>
<label for="input">Provider:</label>
<select id="selected">
<option value="opt1">Option #1</option>
</select>
<a href="https://www.google.com">https://www.google.com</a>
</div>
<div>
<label for="input">Patient Email:</label>
<input type="email" id="email" name="email" placeholder="user@domain.com" />
<input type="button" class="button" value="Send Email" />
</div>
<div>
<label for="input">Patient Mobile Phone:</label>
<input type="tel" id="sms" name="sms" placeholder="(123) 456-7890" />
<input type="button" class="button" value="Send SMS Text" />
</div>
</div>
</div>
- 1 回答
- 0 關注
- 153 瀏覽
添加回答
舉報
0/150
提交
取消