我試圖讓左側的 firefox 視窗看起來與右側的訂閱表單完全相同。但是我似乎無法將其正確對齊在中間，或者像示例中那樣將它們“合并”或粘在一起。我可以稍后退出字體，但我只需要它適合。在“subscribeForm”表單的父 div 上嘗試了 flex，但這只會導致它們作為 1 個元素在直線上繪制。
誰能幫我這個？
演示
.aboutSub{
background-color: #696969;
color: white;
display: flex;
justify-content: flex-start;
flex-direction: column;
gap:2rem;
}
.subscribeForm{
width: 100vw;
}
form{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: gray;
border: 1 solid black;
width:100vw;
}
input[type=text] {
width:90%;
}
/* input[type=text]:focus {
border-color:#333;
} */
input[type=submit] {
width:90%;
}<section>
<div class="aboutSub">
<div>
<h2>About</h2>
<p>Bakery was formed in 2014 after the merger of the two largest bakeries in the country; The Creative
Muffin and Westcoast Bread. With over 200 employees, there isn't a job too big or too ambitious.
</p>
</div>
<div>
<h2>Subscribe</h2>
<p>Give us your email, and we shall send regular updates for new stuff and events.</p>
</div>
<div class="subscribeForm">
<form action="#">
<label for="e-mail"></label>
<input type="text" id="e-mail" name="e-mail">
<input type="submit" value="subscribe">
</form>
</div>
</div>
</section>uj5u.com熱心網友回復：
寬度在填充和 4 像素和邊框上的差異是 4 像素。
只需修改css寬度，如：
input[type=text] {
width:calc(90% - 8px);
}
我建議你直接申請#e-mail而不是input[type=text]
演示
.aboutSub{
background-color: #696969;
color: white;
display: flex;
justify-content: flex-start;
flex-direction: column;
gap:2rem;
}
.subscribeForm{
width: 100vw;
}
form{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: gray;
border: 1 solid black;
width:100vw;
}
input[type=text] {
width:calc(90% - 8px);
}
/* input[type=text]:focus {
border-color:#333;
} */
input[type=submit] {
width:90%;
}<section>
<div class="aboutSub">
<div>
<h2>About</h2>
<p>Bakery was formed in 2014 after the merger of the two largest bakeries in the country; The Creative
Muffin and Westcoast Bread. With over 200 employees, there isn't a job too big or too ambitious.
</p>
</div>
<div>
<h2>Subscribe</h2>
<p>Give us your email, and we shall send regular updates for new stuff and events.</p>
</div>
<div class="subscribeForm">
<form action="#">
<label for="e-mail"></label>
<input type="text" id="e-mail" name="e-mail">
<input type="submit" value="subscribe">
</form>
</div>
</div>
</section>uj5u.com熱心網友回復：
您可以將輸入放入容器中，并為容器設定邊框和大小等樣式，而不是嘗試獨立進行。我還將表單放在容器中，而不是嘗試直接設定樣式。這讓我過去的生活更輕松，所以這只是個人建議。您可能需要稍微調整一下關于部分，但這至少可以解決您的輸入部分問題。我還建議您格式化您的<section>just，這樣您就不會讓瀏覽器確定其布局，但我從您的螢屏截圖中猜測您已經為所有這些制定了計劃:)
.aboutSub {
background-color: #696969;
color: white;
display: flex;
justify-content: flex-start;
flex-direction: column;
padding: 2rem;
margin: 0 auto;
width: 90vw;
}
.formContainer {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
border: 1 solid black;
width: 100%;
padding: 0;
margin: 0 auto;
}
.subscribeContainer {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
border: 2px solid #222222;
width: 90vw;
margin: 0 auto;
padding: 0;
}
input[type=text] {
width: 100%;
padding: 0;
margin: 0;
border: none;
background-color: darkgrey;
height: 3em;
}
input[type=submit] {
width: 100%;
padding: 0;
margin: 0;
border: none;
height: 3em;
}<section>
<div class="aboutSub">
<div>
<h2>About</h2>
<p>Bakery was formed in 2014 after the merger of the two largest bakeries in the country; The Creative Muffin and Westcoast Bread. With over 200 employees, there isn't a job too big or too ambitious.
</p>
</div>
<div>
<h2>Subscribe</h2>
<p>Give us your email, and we shall send regular updates for new stuff and events.</p>
<div class="formContainer">
<form action="#">
<div class="subscribeContainer">
<label for="e-mail"></label>
<input type="text" id="e-mail" name="e-mail"> <input type="submit" value="SUBSCRIBE">
</div>
</form>
</div>
</div>
</div>
</section>uj5u.com熱心網友回復：
你只需要三樣東西：
- 將 box-sizing:border-box 放在內容上
- 使提交按鈕邊框：0
- 為電子郵件輸入提供邊框，底部除外。
* {
box-sizing: border-box;
}
input[type="text"] {
...
border-width: 2px 2px 0 2px;
...
}
input[type="submit"] {
...
border: 0;
...
}這是您編輯的代碼：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/478804.html