登录屏幕 一行密码确认
Login Screen Password confirmation on one line
所以我对整个 HTML/CSS 东西都很陌生,我学到的大部分东西要么来自这里,要么是谷歌搜索我遇到的问题,我的作业快完成了,但我可以`似乎不知道如何在同一行上打印两个标签词。 https://i.stack.imgur.com/TRdxs.png
[<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {background-color: black;}
div {}
label {display:inline-block;width:235px;margin-left: 20px; margin-top: 20px; font-size: 25px; font-family: Calibre; color: white; text-align: left;}
input {margin-top: 20px; margin-right: 20px;padding: 12px 20px;}
#main {border: 5px solid white; width: 600px; height: 400px;}
button {margin-left: 320px; margin-top: 20px; margin-bottom: 20px; background-color:#00BB00; width:120px; height: 40px;
color: white;
font-size: 20px;
border-radius: 46px;
-moz-border-radius: 46px;
-webkit-border-radius: 46px;
border: 0px solid #800000;
font-family: Calibre}
</style>
</head>
<body>
<div id="main">
<form action="/web.engineering" method="post">
<div>
<label>Username:</label>
<input type="text"placeholder="Username" name="username" required>
</div>
<div>
<label>First name:</label>
<input type="text" placeholder="First name" name="firstname" required>
</div>
<div>
<label>Last name:</label>
<input type="text" placeholder="Last name" name="lastname" required>
</div>
<div>
<label>Password:</label>
<input type="password" placeholder="Enter password" name="password" required>
</div>
<div>
<label>Passwordconfirmation:</label>
<input type="password" placeholder="Re-enter password" name="Repeat password" required>
</div>
<div>
<button type="submit" ><b>Register</b></button>
</div>
</form>
</div>
</body>
</html>][1]
这就是我所拥有的,图片是我必须要的 get.Can 请告诉我如何在文本框之前的同一行上打印密码确认。
提前致谢
增大标签的宽度或减小标签的字体大小。因为你有固定的宽度,所以这两个词都不适合该字体大小的 235px 宽度。我试过宽度为 240px,它在同一行,字体大小为 24px,它在同一行。
首先根据 space 容器 div 给出字体大小,第二个使用 display: flex;
和 flex-basis: 230px;
body {
background-color: black;
}
div {}
#main form>div {
display: flex;
}
label {
flex-basis: 230px;
margin-left: 20px;
margin-top: 20px;
font-size: 23px;
font-family: Calibre;
color: white;
text-align: left;
}
input {
margin-top: 20px;
margin-right: 20px;
padding: 12px 20px;
}
#main {
border: 5px solid white;
width: 600px;
height: 400px;
}
button {
margin-left: 320px;
margin-top: 20px;
margin-bottom: 20px;
background-color: #00BB00;
width: 120px;
height: 40px;
color: white;
font-size: 20px;
border-radius: 46px;
-moz-border-radius: 46px;
-webkit-border-radius: 46px;
border: 0px solid #800000;
font-family: Calibre
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
</style>
</head>
<body>
<div id="main">
<form action="/web.engineering" method="post">
<div>
<label>Username:</label>
<input type="text" placeholder="Username" name="username" required>
</div>
<div>
<label>First name:</label>
<input type="text" placeholder="First name" name="firstname" required>
</div>
<div>
<label>Last name:</label>
<input type="text" placeholder="Last name" name="lastname" required>
</div>
<div>
<label>Password:</label>
<input type="password" placeholder="Enter password" name="password" required>
</div>
<div>
<label>Password confirmation:</label>
<input type="password" placeholder="Re-enter password" name="Repeat password" required>
</div>
<div>
<button type="submit"><b>Register</b></button>
</div>
</form>
</div>
</body>
</html>]
希望这会奏效!
所以我对整个 HTML/CSS 东西都很陌生,我学到的大部分东西要么来自这里,要么是谷歌搜索我遇到的问题,我的作业快完成了,但我可以`似乎不知道如何在同一行上打印两个标签词。 https://i.stack.imgur.com/TRdxs.png
[<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {background-color: black;}
div {}
label {display:inline-block;width:235px;margin-left: 20px; margin-top: 20px; font-size: 25px; font-family: Calibre; color: white; text-align: left;}
input {margin-top: 20px; margin-right: 20px;padding: 12px 20px;}
#main {border: 5px solid white; width: 600px; height: 400px;}
button {margin-left: 320px; margin-top: 20px; margin-bottom: 20px; background-color:#00BB00; width:120px; height: 40px;
color: white;
font-size: 20px;
border-radius: 46px;
-moz-border-radius: 46px;
-webkit-border-radius: 46px;
border: 0px solid #800000;
font-family: Calibre}
</style>
</head>
<body>
<div id="main">
<form action="/web.engineering" method="post">
<div>
<label>Username:</label>
<input type="text"placeholder="Username" name="username" required>
</div>
<div>
<label>First name:</label>
<input type="text" placeholder="First name" name="firstname" required>
</div>
<div>
<label>Last name:</label>
<input type="text" placeholder="Last name" name="lastname" required>
</div>
<div>
<label>Password:</label>
<input type="password" placeholder="Enter password" name="password" required>
</div>
<div>
<label>Passwordconfirmation:</label>
<input type="password" placeholder="Re-enter password" name="Repeat password" required>
</div>
<div>
<button type="submit" ><b>Register</b></button>
</div>
</form>
</div>
</body>
</html>][1]
这就是我所拥有的,图片是我必须要的 get.Can 请告诉我如何在文本框之前的同一行上打印密码确认。 提前致谢
增大标签的宽度或减小标签的字体大小。因为你有固定的宽度,所以这两个词都不适合该字体大小的 235px 宽度。我试过宽度为 240px,它在同一行,字体大小为 24px,它在同一行。
首先根据 space 容器 div 给出字体大小,第二个使用 display: flex;
和 flex-basis: 230px;
body {
background-color: black;
}
div {}
#main form>div {
display: flex;
}
label {
flex-basis: 230px;
margin-left: 20px;
margin-top: 20px;
font-size: 23px;
font-family: Calibre;
color: white;
text-align: left;
}
input {
margin-top: 20px;
margin-right: 20px;
padding: 12px 20px;
}
#main {
border: 5px solid white;
width: 600px;
height: 400px;
}
button {
margin-left: 320px;
margin-top: 20px;
margin-bottom: 20px;
background-color: #00BB00;
width: 120px;
height: 40px;
color: white;
font-size: 20px;
border-radius: 46px;
-moz-border-radius: 46px;
-webkit-border-radius: 46px;
border: 0px solid #800000;
font-family: Calibre
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
</style>
</head>
<body>
<div id="main">
<form action="/web.engineering" method="post">
<div>
<label>Username:</label>
<input type="text" placeholder="Username" name="username" required>
</div>
<div>
<label>First name:</label>
<input type="text" placeholder="First name" name="firstname" required>
</div>
<div>
<label>Last name:</label>
<input type="text" placeholder="Last name" name="lastname" required>
</div>
<div>
<label>Password:</label>
<input type="password" placeholder="Enter password" name="password" required>
</div>
<div>
<label>Password confirmation:</label>
<input type="password" placeholder="Re-enter password" name="Repeat password" required>
</div>
<div>
<button type="submit"><b>Register</b></button>
</div>
</form>
</div>
</body>
</html>]
希望这会奏效!