Question

我正在为练习创建一个表单，但是在定位一些文本和输入框时遇到了问题。

这是我的HTML / CSS：

＆＃13;

body {
	background-color:#496491;
	color: white;
	text-shadow: 2px 2px #000000;
}

div {
	background-color:#6F83A8;
}

div.form-group {
    width: 500px;
    margin: auto;
	height: 50px;
	    border-radius: 15px;
    border: 2px solid #A6B4CF;
    padding: 5px; 
    width: 500;
    height: 50px; 
}

.form-horizontal {
	width:30%;
}

＆＃13;

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
		<title>Form1</title> 
		<link rel="stylesheet" href="css/form1.css" /> 

<body>
<b>Progress:</b> <progress max="2" value="0">Step 1 of 3</progress>
<br><br>
		
<form class="form-horizontal">
<fieldset>


<legend>Register New User</legend>


<div class="form-group">
  <label class="col-md-4 control-label" for="username">Username:</label>  
  <input id="username" name="username" type="text" placeholder="enter a new username" class="form-control input-md">
    
  </div>
</div>

<br>

<div class="form-group">
  <label class="col-md-4 control-label" for="password">Password:</label>
    <input id="password" name="password" type="password" placeholder="6 digits or more" class="form-control input-md">
    
  </div>
</div>

</fieldset>
</form>

<form class="form-horizontal">
<fieldset>


<legend>Personal Details</legend>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="name">Name:</label>  
  <input id="name" name="name" type="text" placeholder="first and last name" class="form-control input-md">
    
  </div>
</div>

<br>
<!-- Textarea -->
<div class="form-group">
  <label class="col-md-4 control-label" for="address">Address:</label>                     
    <textarea class="form-control" id="address" name="address">street number and name</textarea>
  </div>
</div>

<br>
<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="suburb">Suburb:</label>  
  <input id="suburb" name="suburb" type="text" placeholder="suburb" class="form-control input-md">
    
  </div>
</div>

<br>
<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="city">City:</label>  
  <input id="city" name="city" type="text" placeholder="city" class="form-control input-md">
    
  </div>
</div>

<br>
<!-- Select Basic -->
<div class="form-group">
  <label class="col-md-4 control-label" for="country">Country:</label>
    <select id="country" name="country" class="form-control">
      <option value="1">--Please Select a Country--</option>
      <option value="2">Australia</option>
      <option value="3">New Zealand</option>
    </select>
  </div>
</div>

<br>
<!-- Select Basic -->
<div class="form-group">
  <label class="col-md-4 control-label" for="state">State:</label>
    <select id="state" name="state" class="form-control">
      <option value="1">--Please Select a State--</option>
      <option value="2">SA</option>
      <option value="3">NT</option>
    </select>
  </div>
</div>

<br>
<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="postcode">Postcode:</label>  
  <input id="postcode" name="postcode" type="text" placeholder="0000" class="form-control input-md">
    
  </div>
</div>

<br>
<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="email">Email:</label>  
  <input id="email" name="email" type="text" placeholder="me@example.com" class="form-control input-md">
    
  </div>
</div>

<br>
<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="phone">Phone:</label>  
  <input id="phone" name="phone" type="text" placeholder="(00)-000-0000" class="form-control input-md">
    
  </div>
</div>

<br>
<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="website">Website:</label>  
  <input id="website" name="website" type="text" placeholder="http://www.example.com" class="form-control input-md">
    
  </div>
</div>

<br>
<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="age">Age:</label>  
  <input id="age" name="age" type="text" placeholder="" class="form-control input-md">
    
  </div>
</div>

</fieldset>
<br><br>
Spam check.
<p><label>What colour is black? (choose a colour) <input type="color" name="carcolor" /></label></p>
</form>
<button type=submit>Continue</button>
	</body> 
</html>

＆＃13;

我怎样才能移动文字＆amp;输入字段以反映更像这样的内容：

这样表单项的所有内容都居中，并且文本始终位于输入字段的左上角 - 例如输入框大于＆＃39;地址＆＃的地址39;文本。（忽略底部的＆＃39;郊区＆＃39;部分，我忘了在图片中编辑它）

提前致谢！

Answer 1

我建议使用 http://getbootstrap.com/css/或 http://www.w3schools.com/css/css_positioning.asp

从我看到你使用一些非常基本的CSS，除非你有抱负 css-editor或front-end只使用Bootstrap和。的内置类 w3schools for positionig（有许多例子）。

我个人非常喜欢Bootstrap。

希望它会有所帮助。

在css / html5

1 个答案: