使用CSS对齐文本和输入问题

Question

希望术语和教师看起来像学生姓名和临床网站，左上角是文本，右下角是输入。

这要我添加有关代码的更多信息，但我没有更多的话要说。

<?php
include ($_SESSION['Root_Path_Full'].'roles/student/scripts/studentqueries.php');
function drawStudentLabel($currentUser, $userinfo) {
echo ('<table id="user_label" border="1">
            <tr>
            <th>Student name: <input class="u_label" readonly                 type="text" value="'.$userinfo['FullName'].'" name="student_name"/></th>
                <th>Term: <input class="u_label" readonly value="'.$userinfo['TermID'].'" type="text" name="term"/></th><br>
                <th>
                    <b>KEY: </b>
                    <a href="../../main/KeyFull.php" target="_blank" class=\'help\' title="Consistently exceeds expected performance">S+</a>/   <a href="KeyFull.php" target="_blank" class=\'help\' title="Performs as expected">S</a> 
                    /   <a href="KeyFull.php" target="_blank" class=\'help\' title="Needs improvement">NI</a> 
                    /   <a href="KeyFull.php" target="_blank" class=\'help\' title="Unsafe or Vastly Deficient">U</a> 
                    /   <a href="KeyFull.php" target="_blank" class=\'help\' title="Not applicable">NA</a> 
                    /   <a href="KeyFull.php" target="_blank" class=\'help\' title="Not Observed by clinical instructor">NO</a> 
                </th></tr>
            <tr>
                <th>Faculty:<input class="u_label" readonly value="'.$userinfo['Instructor'].'" type="text" name="faculty"/></th>
                <th>Clinical Site(s): <input class="u_label" type="text" name="clinical site"/></th>
                <th>- Click on a rating for full explanation</th>
            </tr>
            <tr>');
$result = getStudentAvailClinicals($currentUser);
echo "<td><label>Available Clinicals: </label></td>";
echo "<td ><select id='clinical_id' name='clinicalids'>";
while($row = $result->fetch_assoc()) {if (isset($clinicalids) && ($clinicalids == $row['ClinicalID'])) {
        echo '<option value="'.$row['ClinicalID'].'" selected>'.$row['ClinicalID'].'</option>';
    } else {
        echo '<option value="'.$row['ClinicalID'].'">'.$row['ClinicalID'].'</option>';
    }
}   
echo "</select></td>";  
echo '<td><input type="submit" name="activate" value="Activate" onclick="reloadForQuestions();"/></td></tr></table>';                               

}

CSS

#user_label {
text-align: left;
background-color: #FFFFCC;
float: right;
}

.u_label {
float: right;
text-align: center;
}

#keys {
background-color: #CFCFFF;
text-align: center;
}

#keys td:hover {
background-color: white;
}

#clinical_id {
width: 50%;
text-align: center;
}

Answer 1

将文字包装成标签，如下

<th>
   <label>Student name:</label>
   <input class="u_label" type="text" />
</th>

并添加此css

label{ display:block;}

检查您的解决方案

http://jsfiddle.net/acVCk/

Answer 2

最好将文字换成<label>代码并将label设置为display: block;。这将使您想要并且导致更好的标记启动：

<label for="term">Term:</label> 
<input class="u_label" id="term" type="text" name="term"/>

编辑：好的，打败它，但是因为提到for / id我会把它留下来。