gpt4 book ai didi

HTML/CSS : trouble displaying 2 divs in horizontal line?

转载 作者:行者123 更新时间:2023-11-28 17:08:21 25 4
gpt4 key购买 nike

好的,这里有一些奇怪的 CSS 问题试图实现这一点,在每个水平居中的输入字段的右侧都有一个警告:

enter image description here

现在我有居中输入,但无论我用 float 做什么,甚至在 .warning div 上转换或翻译,我都无法实现这一点。

.warning {
display: none;
margin-top: 10px;
}

.warning p {
color: #e85748;
display: none;
transform: translateX(105%) translateY(232%);
}

.ico-circle {
width: 40px;
position: absolute;
height: 40px;
border-radius: 50%;
transform: translateX(720%) translateY(22%);
background: #e85748;
}

textarea {
border: 2px solid #a0b3b0;
resize: vertical;
}

.field-wrap {
position: relative;
width: 50%;
float: center;
margin: auto;
margin-bottom: 9px;
}

input,
textarea {
padding: 15px 15px;
display: block;
margin: auto;
width: 200px;
/* height: 100%; */
color: #333333;
border-color: #333333;
border-radius: 15px;
-webkit-transition: border-color .25s ease, box-shadow .25s ease;
transition: border-color .25s ease, box-shadow .25s ease;
border-radius: 30px;
font-size: 16px;
font-weight: 500;
border: 4px solid #333333;
line-height: 1.3;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
text-indent: 13px;
flex: 0 0 160px;
width: 200px;
background-color: transparent;
}

input:focus {
outline: none !important;
border: 4px solid #e85748;
width: 250px;
-webkit-transition: width .25s ease;
transition: width .25s ease;
}
<div class="field-wrap">
<input id="username" type="text" placeholder="Username" required autocomplete="off">
<div class="warning" />
<p>Hello world</p>
<div class="ico-circle">
</div>
</div>
</div>

<div class="field-wrap">
<input type="password" placeholder="Password" required autocomplete="off">
<div class="warning">
<p>Hello world</p>
<div class="ico-circle">
</div>
</input>
</div>

<a href="#" class='button -dark' id="register-btn">Register</a>
<a href="#" class='bot-link' value=1><i class="icon-chevron-left"></i>Wait, take me back</a>

我在这里做错了什么?

最佳答案

您可以使用 flexbox 来完成但我不确定当输入更宽和/或旁边有警告时你希望它如何呈现。也许这足以为您指明正确的方向:

.warning {
display: none;
}

.warning p {
color: #e85748;
}

.ico-circle {
width: 40px;
height: 40px;
border-radius: 50%;
background: #e85748;
order: -1;
}

textarea {
border: 2px solid #a0b3b0;
resize: vertical;
}

.field-wrap {
display: flex;
position: relative;
margin-bottom: 9px;
}

input,
textarea {
padding: 15px 15px;
margin: auto;
width: 200px;
/* height: 100%; */
color: #333333;
border-color: #333333;
border-radius: 15px;
-webkit-transition: border-color .25s ease, box-shadow .25s ease;
transition: border-color .25s ease, box-shadow .25s ease;
border-radius: 30px;
font-size: 16px;
font-weight: 500;
border: 4px solid #333333;
line-height: 1.3;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
text-indent: 13px;
width: 200px;
background-color: transparent;
}

input:focus {
outline: none !important;
border: 4px solid #e85748;
width: 250px;
-webkit-transition: width .25s ease;
transition: width .25s ease;
}

input:focus:invalid+.warning {
display: flex;
}
<div class="field-wrap">
<input id="username" type="text" placeholder="Username" required autocomplete="off" />
<div class="warning">
<p>Hello world</p>
<div class="ico-circle">
</div>
</div>
</div>

<div class="field-wrap">
<input type="password" placeholder="Password" required autocomplete="off" />
<div class="warning">
<p>Hello world</p>
<div class="ico-circle">
</div>
</div>
</div>

<a href="#" class='button -dark' id="register-btn">Register</a>
<a href="#" class='bot-link' value=1><i class="icon-chevron-left"></i>Wait, take me back</a>

关于HTML/CSS : trouble displaying 2 divs in horizontal line?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48029237/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com