在flex中放置和缩放元素时出错

Question

所以我试图用HTML和SASS建立一个小网站。我正在自定义一个表单输入框，如在图像表单输入框中所示，而它的到来非常像这我的错误。

HTML

<form action="input">
<input id="email" type="email" placeholder="Email Address" autocomplete="off">
<img id="error" src="/assets/images/icon-error.svg" alt="error.svg">
<button type="submit">
<img id="arrow" src="/assets/images/icon-arrow.svg" alt="">
</button>
</form>

SASS:

form {
display: flex;
align-content: center;
}

#email {
outline: none;
background: none;
border-color: $desaturatedRed;
border-style: solid;
border-width: thin;
border-radius: 50px;
width: 70%;
height: 50px;
padding-left: 5%;

&::placeholder {
color: $desaturatedRed;
font-family: 'Josefin Sans', sans-serif;
}
}

button {
width: 20%;
height: 50px;
outline: none;
background: $gradient2;
border-radius: 50px;
align-content: center;
border-style: none;
cursor: pointer;
margin-left: -8%;
visibility: hidden;
}

#error {
margin-left: -10%;
}

SASS变量。SASS:

$desaturatedRed: hsl(0, 36%, 70%);
$softRed: hsl(0, 93%, 68%);
$darkGrayRed: hsl(0, 6%, 24%);
$gradient1: linear-gradient(135deg, hsl(0, 0%, 100%), hsl(0, 100%, 98%));
$gradient2: linear-gradient(135deg, hsl(0, 80%, 86%), hsl(0, 74%, 74%));

请帮我一下。

Answer 1

不查看svg代码....

看起来你根本没有用svg设置图像元素的大小。

Flexbox不是所有定位任务的助手。在这种情况下，你可以使用绝对定位而不是flexbox。

也许你喜欢在SASS中尝试这样的东西:

form {
//  --> use absolute positioning
// display: flex;
// align-items: center;
position: relative;
// --> size wrapper element for correct inner absolute positioning
width: 70%;
}
#email {
// inner element full width as wrapper element is sized
width: 100%;
// --> avoid unwhanted sizing effects using padding in input
box-sizing: border-box;
outline: none;
background: none;
border-color: $desaturatedRed;
border-style: solid;
border-width: thin;
border-radius: 50px;
height: 50px;
padding-left: 5%;
&::placeholder {
color: $desaturatedRed;
font-family: "Josefin Sans", sans-serif;
}
}
button {
// --> absolute positioning right
position: absolute;
top: 0;
right: 0;
width: 20%;
height: 50px;
outline: none;
background: $gradient2;
border-radius: 50px;
align-content: center;
border-style: none;
cursor: pointer;
// margin-left: -8%; --> not needed as of absolute positioning
// visibility: hidden; --> not seen when hidden ?!
}
#error {
// --> absolute positioning from right with vertical centering
position: absolute;
right: 22%;
top: 0;
bottom: 0;
margin: auto 0;
// --> sizing svg-image
height: 35px;   // or similar
width: 35px;    // or similar
}
#arrow {
// --> sizing svg-image
height: 50px;
width: auto;   // depends on svg
}