Question

我确定某处有答案，但我找不到答案。我已经看到人们使用flex而且看起来很有希望，但它似乎只是打破了局面。

原始代码：

＆＃13;

.checkImg {
	margin-left: 10px;
	vertical-align: bottom;
}

form {
	text-align: center;
}

＆＃13;

<!DOCTYPE HTML>
<html lang="en">
<head>
</head>
<body>
	<form>
		<!-- https://stackoverflow.com/questions/27838228/redirecting-the-user-to-the-same-page-after-login -->
		Nickname:<br>
		<input type="text" name="nickname"><img class="checkImg" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1SRSjmKURx3aIkIUvNZg2iyyzhTctX1nPlfn8Yo49JdeffVG8Pg"></img>
		<br>
		Password:<br>
		<input type="password" name="password">
		<br>
		Email:<br>
		<input type="email" name="email"><img class="checkImg" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1SRSjmKURx3aIkIUvNZg2iyyzhTctX1nPlfn8Yo49JdeffVG8Pg"></img>
		<br><br>
		<input type="submit" value="Submit">
	<form>
</body>
</html>

＆＃13;

尝试从此处设置flex：How to use flexbox

它是怎么回事：

＆＃13;

.checkImg {
  margin-left: auto;
  vertical-align: bottom;
}

form {
   text-align: center;
}

div {
  display: flex;
}

.flex {
  flex: 1;
  display: inline-flex;
  justify-content: center;
  text-align: center;
  align-self: flex-start
}

＆＃13;

<!DOCTYPE HTML>
<html lang="en">
<head>
</head>
<body>
	<form>
		<!-- https://stackoverflow.com/questions/27838228/redirecting-the-user-to-the-same-page-after-login -->
		Nickname:<br>
		<div><input class="flex" type="text" name="nickname"><img class="checkImg flex" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1SRSjmKURx3aIkIUvNZg2iyyzhTctX1nPlfn8Yo49JdeffVG8Pg"></img></div>
		<br>
		Password:<br>
		<input type="password" name="password">
		<br>
		Email:<br>
		<input type="email" name="email"><img class="checkImg" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1SRSjmKURx3aIkIUvNZg2iyyzhTctX1nPlfn8Yo49JdeffVG8Pg"></img>
		<br><br>
		<input type="submit" value="Submit">
	<form>
</body>
</html>

＆＃13;

我尝试flex-grow: 0（在左侧设置输入，在右侧开始设置图像，移除拉伸），align-items: flex-start并且这些似乎都不起作用。感觉我真的很亲密，但由于这是我第一次遇到flex，我似乎无法找到合适的解决方案。

Answer 1

使用flexbox的可能解决方案之一。（注意：您可以通过多种方式实现相同目的）。你也可以使用:: after伪元素，但在这个例子中我保留了你的图像。特技是将图像位置设置为绝对值，然后它不会影响对齐。

    <form>

            <div >Nickname:<br>

    <input type="text" name="nickname" ><img class="checkImg flex" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1SRSjmKURx3aIkIUvNZg2iyyzhTctX1nPlfn8Yo49JdeffVG8Pg">
    </div>
<div>
        Password:<br>
        <input type="password" name="password">
</div>

        <div>
        Email:<br>
        <input type="email" name="email"><img class="checkImg flex" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1SRSjmKURx3aIkIUvNZg2iyyzhTctX1nPlfn8Yo49JdeffVG8Pg">
    </div>


        <div>

    <input type="submit" value="Submit">
    </div>
    <form>

CSS：

    form {
display:flex;
align-items:center;
flex-direction: column;
}
div {
margin:10px;
text-align:center;
position:relative;

}
.checkImg {
  position:absolute;
 right:-30px;
}

样本：

＆＃13;

form {
display:flex;
align-items:center;
flex-direction: column;
}
div {
margin:10px;
text-align:center;
position:relative;
  
}
.checkImg {
  position:absolute;
 right:-30px;
}

＆＃13;

<form>
	
			<div >Nickname:<br>
	
    <input type="text" name="nickname" ><img class="checkImg flex" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1SRSjmKURx3aIkIUvNZg2iyyzhTctX1nPlfn8Yo49JdeffVG8Pg">
    </div>
<div>
		Password:<br>
		<input type="password" name="password">
</div>

		<div>
    	Email:<br>
		<input type="email" name="email"><img class="checkImg flex" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1SRSjmKURx3aIkIUvNZg2iyyzhTctX1nPlfn8Yo49JdeffVG8Pg">
    </div>
	
		
		<div>
   
    <input type="submit" value="Submit">
    </div>
	<form>

＆＃13;

两个元素，保持一个居中，其次是左/右

1 个答案: