用CSS對齊文本和輸入問題

希望術語和教師看起來像學生姓名和臨牀網站，左上方是文本，右下方是輸入。用CSS對齊文本和輸入問題

這需要我添加更多關於代碼的信息，但我沒有更多可以說的。

This is displayed on a webpage, We are having problems getting the alignment of term and faculty to look like student name and clinical site

<?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; 
}

來源

2013-05-02 Jessica

那麼我唯一發現的就是它與文本的寬度有關。你應該給它一個最大寬度，這樣它就會破壞規則並進一步下降 – DiederikEEn 2013-05-02 12:55:55

你可以將.u_label設置爲max-width：auto嗎？還是我需要在那裏放一個像素？ – Jessica 2013-05-02 13:12:26

包裝您的文字標籤這樣

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

，並添加這個CSS

label{ display:block;}

點擊這裏

http://jsfiddle.net/acVCk/

來源

2013-05-02 13:06:02

這就是你如何使用該網站謝謝你們！ – Jessica 2013-05-02 13:20:38

您的解決方案這將是更好的換行文本<label>標籤，並設置label到display: block;。這會給你想要你和產生更好的標記來引導：

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

編輯：OK，打它，但我會離開它，因爲for/id提的。

來源

2013-05-02 13:08:49

用CSS對齊文本和輸入問題

回答

相關問題