Question

所以我对整个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]

所以这就是我所拥有的，图片是我必须得到的。您可以告诉我如何在文本框之前的同一行打印密码确认。提前致谢

Answer 1

使标签的宽度变大或缩小标签的字体大小。由于您具有固定宽度，因此两个单词都不适合该字体大小的235px宽度。我试过宽度为240px它在同一行，并且24px字体大小它在同一行。

Answer 2

首先根据空间容器div提供font-size，第二个使用display: flex; flex-basis: 230px;

＆＃13;

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
}

＆＃13;

<!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>]

＆＃13;

希望这会奏效！

登录屏幕密码确认在一行

2 个答案: