Question

<html>
<head>
    <link rel="stylesheet" href="css/main.css">
    <meta charset="utf-8">
    <title> Contact page </title>
</head>
<body>
<div id="wrapper">  
        <header>
            <nav>
                  <ul>
                    <li> <a href="index.html"> Index </a></li>
                    <li> <a href="learning_log.html"> Learning Log </a></li>
                    <li> <a href="contact.html"> Contact </a></li>
              </ul>
        </nav>
    </header>



<h1> Contact page </h1>
<form> 
    <fieldset>
        <legend>Contact Information</legend>
    <p><label >first_name*: <input type="text" name="first_name*" required></label></p> 
    <p><label >last_name*: <input type="text" name="last_name*" required></label></p>
    <p><label >phone_number*: <input type="number" name="number*" required></label></p>    
        </fieldset>
        <fieldset>
            <legend>Radio</legend>
 <label >  contact_permission* </label><br>
     <input type="radio" name="rating" required value="1 hour"> Yes <br/>
 <input type="radio" name="rating" value="2 hours"> No <br/>  
            </fieldset>
        <fieldset>
        <legend>Dropdown List</legend>
        <label>best_time_to_contact*: </label>
<select required>
 <option value="">Please Select</option>
 <option value="1"> Morning</option>
 <option value="2"> Afternoon</option>
 <option value="3"> Evening</option>
</select>
        </fieldset>
        <fieldset>
            <legend>Check box</legend>
        <label > how_can_i_contact_you  </label><br>
<input type="checkbox" name="Phone" value="Phone"> Phone<br>
<input type="checkbox" name="Email" value="Email"> Email <br>
        </fieldset>

  <br>      



        <input type="submit" name="Submit" value="Submit">
    </form>
    </div>
    </body>
</html>

不太确定如何解决这个问题，我尝试在样式部分中进行text-align：left和text-align：右键，但是当我添加它时没有发生任何变化。我不知道有任何其他方法可以做到这一点。 https://jsfiddle.net/tyvx60zc/这里是我的外部CSS的代码的jsfiddle。任何帮助将不胜感激

Answer 1

label {
   display: block;
   text-align: initial;
}
label>input {
   float: right;
}

Answer 2

从包装器中删除text-align: center;，改为使用：

input {
  display: inline-block;
  position: relative;
}

label {
  display: inline-block;
  width: 200px;
  text-align: right;
}

https://jsfiddle.net/abalter/tyvx60zc/1/

FWIW，我也更喜欢使用<label for="...

Answer 3

将以下CSS添加到CSS文件中：

p label{
width: 35%;
display: inline-block;
text-align: left;
}

p label input{
float: right;
}

如何右对齐输入字段并左对齐标签？

3 个答案: