Css登录系统网站

问题描述 投票：-1回答：3

我需要在右侧漂浮我的柱子，但我不知道如何将它们放在彼此之间并且它们之间有空间。 CSS链接到HTML页面，一些CSS在HTML页面中，因为我使用谷歌字体。

@charset "ISO-8859-1";


body {
	background-image: url("https://i.imgur.com/5fHm9Kt.png");
}
.wrapper {
	background-color: white;
	margin: 0 auto; 
	float: right;
	width: 350px;
}
.wrapper2 {
	background-color: white;
	margin: 0 auto;
	margin-top:20px; 
	float: right;
	width: 350px;
}
.grid {
	display:block;
}
form{
	margin: auto;
	text-align: center;
}
signup-form input[type="text"] {
	margin: auto;
	margin-bottom: 10px;
	width: 70%;
}
input{
	display: block;
	text-align: center;
	margin: auto;
	width: 70%;
	padding: 5px;
}
signup-form input input[type="text"] {
	margin-top:20px;
	margin-bottom: 10px;
	width: 70%;
}
button{
	display: center;
	padding: 5px;
	border: gray;
	background-color: light-gray;
	margin-top: 10px;
	margin-bottom: 10px;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <title>Document</title>
</head>
<body>

<style>
 .wrapper h2 {	
	color: #48B758;
	text-align:center;
	padding: 10px;
	border-bottom: 1px solid #000000;
	border-radius-top: 5px;
	border-color: silver;
	font-family: 'Roboto', sans-serif;
	font-size: 40px;
	font-weight: lighter;
}
.wrapper2 h2 {	
	color: #48B758;
	text-align:center;
	padding: 10px;
	border-bottom: 1px solid #000000;
	border-radius-top: 5px;
	border-color: silver;
	font-family: 'Roboto', sans-serif;
	font-size: 40px;
	font-weight: lighter;
}

button{
	display: center;
	padding: 5px;
	width: 75%; 
	background-color: light-gray;
	margin-top: 10px;
	margin-bottom: 10px;
	font-family: 'Roboto', sans-serif;
}
</style>
 
 <div class="grid">
   <div id="wrapper" class="wrapper">
   <h2>Registreer</h2>
            <form class="signup-form" id="signup-form" action="signup.inc.php" method="POST">
                <input type="text" name="first" placeholder="Voornaam">
                <input type="text" name="last" placeholder="Achternaam">
                <input type="text" name="email" placeholder="E-mail">
                <input type="text" name="uid" placeholder="Gebruikersnaam">
                <input type="password" name="pwd" placeholder="Password">
                <button type="submit" name="submit">Account aanmaken</button>
            </form>          
      </div>
      <div id="wrapper2" class="wrapper2">
      <h2>Login</h2>
      <form>
            <input type="text" placeholder="voornaam">
            <input type="text" placeholder="achternaam">
            <input type="password" placeholder="Wachtwoord">
            <button type="submit" name="login">Login !</button>
            </form>         
      </div>
 </div>
</body>
</html>
html css
3个回答
0
投票
    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <title>Document</title>
</head>
<body>

<style>
 .wrapper h2 {  

  color: #48B758;
  text-align:center;
  padding: 10px;
  border-bottom: 1px solid #000000;
  border-radius-top: 5px;
  border-color: silver;
  font-family: 'Roboto', sans-serif;
  font-size: 40px;
  font-weight: lighter;
}
.wrapper2 h2 {  

  color: #48B758;
  text-align:center;
  padding: 10px;
  border-bottom: 1px solid #000000;
  border-radius-top: 5px;
  border-color: silver;
  font-family: 'Roboto', sans-serif;
  font-size: 40px;
  font-weight: lighter;
}

button{
  display: center;
  padding: 5px;
  width: 75%; 
  background-color: light-gray;
  margin-top: 10px;
  margin-bottom: 10px;
  font-family: 'Roboto', sans-serif;
}


@charset "ISO-8859-1";


body {
  background-image: url("https://i.imgur.com/5fHm9Kt.png");
}
.wrapper {
  background-color: white;
  margin: 0 auto; 

  width: 350px;
}
.wrapper2 {
  background-color: white;
  margin: 0 auto;
  margin-top:20px; 

  width: 350px;
}
.grid {
  float: right;
}
form{
  margin: auto;
  text-align: center;
}
signup-form input[type="text"] {
  margin: auto;
  margin-bottom: 10px;
  width: 70%;
}
input{
  display: block;
  text-align: center;
  margin: auto;
  width: 70%;
  padding: 5px;
}
signup-form input input[type="text"] {
  margin-top:20px;
  margin-bottom: 10px;
  width: 70%;
}
button{
  display: center;
  padding: 5px;
  border: gray;
  background-color: light-gray;
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>

 <div class="grid">
    <div id="wrapper" class="wrapper">
        <h2>Registreer</h2>
        <form class="signup-form" id="signup-form" action="signup.inc.php" method="POST">
            <input type="text" name="first" placeholder="Voornaam">
            <input type="text" name="last" placeholder="Achternaam">
            <input type="text" name="email" placeholder="E-mail">
            <input type="text" name="uid" placeholder="Gebruikersnaam">
            <input type="password" name="pwd" placeholder="Password">
            <button type="submit" name="submit">Account aanmaken</button>
        </form>
    </div>
    <div id="wrapper2" class="wrapper2">
        <h2>Login</h2>
        <form>
            <input type="text" placeholder="voornaam">
            <input type="text" placeholder="achternaam">
            <input type="password" placeholder="Wachtwoord">
            <button type="submit" name="login">Login !</button>
        </form>
    </div>
</div>
</body>
</html>
0
投票

这是你想要的？

@charset "ISO-8859-1";


body {
	background-image: url("https://i.imgur.com/5fHm9Kt.png");
}
.wrapper {
	background-color: white;
	margin: 20px 0; 
	float: right;
	width: 350px;
}
.wrapper2 {
	background-color: white;
	margin: 0 auto;
	margin-top:20px; 
	float: right;
	width: 350px;
}
.wrapper2 form{
padding-bottom: 59px;
}
.grid {
	display:block;
}
form{
	margin: auto;
	text-align: center;
}
signup-form input[type="text"] {
	margin: auto;
	margin-bottom: 10px;
	width: 70%;
}
input{
	display: block;
	text-align: center;
	margin: auto;
	width: 70%;
	padding: 5px;
}
signup-form input input[type="text"] {
	margin-top:20px;
	margin-bottom: 10px;
	width: 70%;
}
button{
	display: center;
	padding: 5px;
	border: gray;
	background-color: light-gray;
	margin-top: 10px;
	margin-bottom: 10px;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <title>Document</title>
</head>
<body>

<style>
 .wrapper h2 {	
	color: #48B758;
	text-align:center;
	padding: 10px;
	border-bottom: 1px solid #000000;
	border-radius-top: 5px;
	border-color: silver;
	font-family: 'Roboto', sans-serif;
	font-size: 40px;
	font-weight: lighter;
}
.wrapper2 h2 {	
	color: #48B758;
	text-align:center;
	padding: 10px;
	border-bottom: 1px solid #000000;
	border-radius-top: 5px;
	border-color: silver;
	font-family: 'Roboto', sans-serif;
	font-size: 40px;
	font-weight: lighter;
}

button{
	display: center;
	padding: 5px;
	width: 75%; 
	background-color: light-gray;
	margin-top: 10px;
	margin-bottom: 10px;
	font-family: 'Roboto', sans-serif;
}
</style>
 
 <div class="grid">
   <div id="wrapper" class="wrapper">
   <h2>Registreer</h2>
            <form class="signup-form" id="signup-form" action="signup.inc.php" method="POST">
                <input type="text" name="first" placeholder="Voornaam">
                <input type="text" name="last" placeholder="Achternaam">
                <input type="text" name="email" placeholder="E-mail">
                <input type="text" name="uid" placeholder="Gebruikersnaam">
                <input type="password" name="pwd" placeholder="Password">
                <button type="submit" name="submit">Account aanmaken</button>
            </form>          
      </div>
      <div id="wrapper2" class="wrapper2">
      <h2>Login</h2>
      <form>
            <input type="text" placeholder="voornaam">
            <input type="text" placeholder="achternaam">
            <input type="password" placeholder="Wachtwoord">
            <button type="submit" name="login">Login !</button>
            </form>         
      </div>
 </div>
</body>
</html>
0
投票

您需要在CSS中为clear类指定wrapper2属性

每个Mozilla开发人员文档Web technology for developers > CSS > clear：

clear CSS属性指定元素是否可以位于其前面的浮动元素旁边，或者必须在它们下面向下移动（清除）。 clear属性适用于浮动和非浮动元素。

更具体地说，对于浮动元素，如下例所示：

当应用于浮动元素时，它会将元素的边缘移动到所有相关浮点的边缘下方。这会影响后续浮点数的位置，因为后面的浮点数不能高于先前的浮点数。

您可以通过将clear属性设置为both或right来实现此目的，如下所示 - 

.wrapper2 {
    background-color: white;
    margin: 0 auto;
    margin-top:20px; 
    float: right;
    width: 350px;
    clear:both;
}

完整演示发布于：JsFiddle

@charset "ISO-8859-1";


body {
	background-image: url("https://i.imgur.com/5fHm9Kt.png");
}
.wrapper {
	background-color: white;
	margin: 0 auto; 
	float: right;
	width: 350px;
}
.wrapper2 {
	background-color: white;
	margin: 0 auto;
	margin-top:20px; 
	float: right;
	width: 350px;
  clear:both;
}
.grid {
	display:block;
}
form{
	margin: auto;
	text-align: center;
}
signup-form input[type="text"] {
	margin: auto;
	margin-bottom: 10px;
	width: 70%;
}
input{
	display: block;
	text-align: center;
	margin: auto;
	width: 70%;
	padding: 5px;
}
signup-form input input[type="text"] {
	margin-top:20px;
	margin-bottom: 10px;
	width: 70%;
}
button{
	display: center;
	padding: 5px;
	border: gray;
	background-color: light-gray;
	margin-top: 10px;
	margin-bottom: 10px;
}

 .wrapper h2 {	
	color: #48B758;
	text-align:center;
	padding: 10px;
	border-bottom: 1px solid #000000;
	border-radius-top: 5px;
	border-color: silver;
	font-family: 'Roboto', sans-serif;
	font-size: 40px;
	font-weight: lighter;
}
.wrapper2 h2 {	
	color: #48B758;
	text-align:center;
	padding: 10px;
	border-bottom: 1px solid #000000;
	border-radius-top: 5px;
	border-color: silver;
	font-family: 'Roboto', sans-serif;
	font-size: 40px;
	font-weight: lighter;
}

button{
	display: center;
	padding: 5px;
	width: 75%; 
	background-color: light-gray;
	margin-top: 10px;
	margin-bottom: 10px;
	font-family: 'Roboto', sans-serif;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport"
            content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <title>Document</title>
  </head>
  <body>
  <div class="grid">
     <div id="wrapper" class="wrapper">
     <h2>Registreer</h2>
        <form class="signup-form" id="signup-form" action="signup.inc.php" method="POST">
            <input type="text" name="first" placeholder="Voornaam">
            <input type="text" name="last" placeholder="Achternaam">
            <input type="text" name="email" placeholder="E-mail">
            <input type="text" name="uid" placeholder="Gebruikersnaam">
            <input type="password" name="pwd" placeholder="Password">
            <button type="submit" name="submit">Account aanmaken</button>
        </form>          
     </div>
     <div id="wrapper2" class="wrapper2">
        <h2>Login</h2>
        <form>
          <input type="text" placeholder="voornaam">
          <input type="text" placeholder="achternaam">
          <input type="password" placeholder="Wachtwoord">
          <button type="submit" name="login">Login !</button>
        </form>         
      </div>
   </div>
  </body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.