如何獲取標籤排隊

我幾乎用我的計算器應用程序來完成。我必須做的最後一件事是將兩個標籤（「First Number：」和「Second Number：」）完美對齊。我想將「First Number：」向右移動一點，以便冒號：冒號與冒號在下面排成一行。我試過將標籤分配給一個類，然後在CSS中移動它，但是這也將文本框移到了右側。這裏是我的全功能HTML：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Calculator</title> 
<link rel="stylesheet" href="styles.css"> 
<script src="calculator.js"></script> 
</head> 
<body> 
<section> 
<h1>Calculator</h1> 

<label> </label> 
<input class="noLabel" type="text" id="sum" disabled="disabled"> 
<br> 
<label>First Number:</label> 
<input type="text" id="firstNumber">  
<br> 
<label>Second Number:</label> 
<input type="text" id="secondNumber"> 
<br> 

<div> 
<input type="button" id="calc" value="Calculate"> 
<input type="button" id="clear" value="Clear"> 
</div> 

</section> 
</body> 

</html>

我的CSS：

input:not([type="button"]) { 
margin-left: -5em; 
margin-bottom: .5em; 
} 

input.noLabel { 
margin-left:11em; 
background-color: Beige; 
color: blue; 
} 


label { 
width: 11em; 
float:left; 

} 

h1 { 
color:black; 
text-align:center; 
} 

section { 
padding: 0 2em 1em; 
border: grey solid; 
background-color: #DCDCDC; 
width: 350px; 
} 

div { 
margin-left: 7.5em; 
}

一如往常，感謝您的幫助！

結果：

來源

2015-10-03 HappyHands31

嗨，你想要什麼我不明白？用圖像描述你實際需要的東西。 –

原圖下面的新照片顯示了我正在嘗試做的事情......「第一個數字：」被轉移到右側。謝謝！ – HappyHands31

我已經修改了你的代碼複製該標籤的預期輸出。您只需在標籤上使用text-align: right，寬度略大於標籤文本，因爲文本將排列在最右端。

但我建議使用這種佈局：Forms Horizontal這是更好，易於管理編輯。

input:not([type="button"]) { 
 
    margin-bottom: 0.5em; 
 
    margin-left: 0.6em; /* Modified */ 
 
} 
 
input.noLabel { 
 
    margin-left: 11em; 
 
    background-color: Beige; 
 
    color: blue; 
 
} 
 
label { 
 
    float: left; 
 
    text-align: right; /* Added */ 
 
    width: 140px; /* Modified */ 
 
} 
 
h1 { 
 
    color: black; 
 
    text-align: center; 
 
} 
 
section { 
 
    padding: 0 2em 1em; 
 
    border: grey solid; 
 
    background-color: #DCDCDC; 
 
    width: 350px; 
 
} 
 
div { 
 
    margin-left: 7.5em; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Calculator</title> 
 
    <link rel="stylesheet" href="styles.css"> 
 
    <script src="calculator.js"></script> 
 
</head> 
 

 
<body> 
 
    <section> 
 
    <h1>Calculator</h1> 
 

 
    <label></label> 
 
    <input class="noLabel" type="text" id="sum" disabled="disabled"> 
 
    <br> 
 
    <label>First Number:</label> 
 
    <input type="text" id="firstNumber"> 
 
    <br> 
 
    <label>Second Number:</label> 
 
    <input type="text" id="secondNumber"> 
 
    <br> 
 

 
    <div> 
 
     <input type="button" id="calc" value="Calculate"> 
 
     <input type="button" id="clear" value="Clear"> 
 
    </div> 
 

 
    </section> 
 
</body> 
 

 
</html>

來源

2015-10-03 14:47:58

感謝您的回答，但遺憾的是您的修改導致了上圖（帖子中的最後一張圖片）。即使它在您的代碼片段中起作用，我仍然必須將標籤和文本框再次移回左側。 – HappyHands31

如何獲取標籤排隊

回答

相關問題