Question

所以我有四个输入和一个按钮。我尝试用CSS编辑它们，但我似乎无法让它们分开。他们都在一起。无论我尝试改变什么数字。这是我的两个文件的代码。对不起，如果我得到一些完全错误的东西，我就是一个菜鸟。

nav ul input{
	margin: 0px 0px 10px 0px;
	position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
	height: 50px;
	width: 300px;
	background-color: transparent;
	color: black;
	border: solid;
	font-size: 30px;
	text-align: center;
}

#signInBtn{
	margin: 0px;
	position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
	height: 50px;
	width: 300px;
	background-color: transparent;
	color: black;
	border: solid;
	font-size: 30px;
	text-align: center;
}

::-webkit-input-placeholder {
    color: black;
}

 <!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>NAME</title> 
	<link href="https://fonts.googleapis.com/css?family=Baloo+Tamma" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>

 </html>

<header>
	<nav>
		<ul>
			<?php 
				echo "<form action='includes/signup.inc.php' method='POST'>	
					<input id='nameInput' type='text' name='first' placeholder='Firstname'>
					<input id='lstInput' type='text' name='last' placeholder='Lastname'>
					<input id='usrInput' type='text' name='uid' placeholder='Username'>
					<input id='pwdInput' type='password' name='pwd' placeholder='Password'>
					<button id='signInBtn' type='submit'>Sign Up</button>
				</form>";
			?>
		</ul>
	</nav>
</header>

Answer 1

尝试button,input {display:block}，ul需要分钟。一个li

Answer 2

在你的css中，你的所有输入都使用绝对位置。这就是为什么所有输入都汇集在一起的原因。

nav ul input {
   position: relative;
   display: block;
}

#signInBtn {
  position: relative;
}

只需将其更改为相对位置或适合您的位置。

Answer 3

您正在使用绝对位置，导致重叠问题并且你有错误的结束标记所以我更正了你的代码，请看下面的演示并告诉我你是否需要其他任何东西。

.wrapper {
            margin: 0 auto;
        }

    .input_block {
        text-align: center;
        margin-top: 10px;
    }

   input {
    padding: 20px;
        width: 200px;
        color: black;
        border: solid;
        font-size: 15px;
    }


    #signInBtn {
        padding: 20px
        width: 200px;
        color: black;
        border: solid;
        font-size: 30px;
    }

    ::-webkit-input-placeholder {
        color: black;
    }

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>NAME</title>
        <link href="https://fonts.googleapis.com/css?family=Baloo+Tamma" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="style.css">

    </head>

    <body>
    <div class="wrapper">
        <form action='includes/signup.inc.php' method='POST'>
            <div class="input_block">
                <input id='nameInput' type='text' name='first' placeholder='Firstname'>
            </div>

            <div class="input_block">
                <input id='lstInput' type='text' name='last' placeholder='Lastname'>
            </div>

            <div class="input_block">
                <input id='usrInput' type='text' name='uid' placeholder='Username'>
            </div>

            <div class="input_block">
                <input id='pwdInput' type='password' name='pwd' placeholder='Password'>
            </div>

            <div class="input_block">
                <button id='signInBtn' type='submit'>Sign Up</button>
            </div>
        </form>
    </div>
    </body>
    </html>

Answer 4

nav ul input{
/* delete position */
/* add */
display: block;
margin: 0 auto;
float: none;
}

/* do the same*/
#signInBtn{
/* delete position */
/* add */d
display: block;
margin: 0 auto;
float: none;
}

！你不必保持保证金0和浮动：没有，但我认为这是一个良好的开端，然后才弄清楚你想要的东西

如何分开我的输入？

4 个答案: