如何在標題下垂直添加文本

我正在創建標記表單，並且有四個標題，一個用於註釋，一個用於標記，一個用於標記，最後一個用於標註。如何在Section標題正下方創建這些子標題，以便它們彼此垂直對齊。如何在標題下垂直添加文本

**Section****Max****Comments****Mark**

Dynamic

Intellij

Control

Active

Database

底下我的評論標題我已創建5個文本框，這是在頁面中間的所有中心

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
<style type="text/css"> 
    p { 
    text-align: center; 
    color: red; 
    font-weight: bold; 

    } 

    p1 { 
    position: relative; 
    left: 1040px; 
    color: red; 
    font-weight: bold; 
    bottom:32px 
    } 

    p2 { 
    position: relative; 
    left: 100px; 
    color: red; 
    font-weight: bold; 
    top:35px 
    } 

    p3 { 
    position: relative; 
    left: 350px; 
    color: red; 
    font-weight: bold; 
    top:35px 
    } 
</style> 

<script type="text/javascript"> 
    function Run() { 
     // alert("Running"); 
     var ipNode = document.getElementById("Input"); 

     var opNode = document.getElementById("Output"); 
     opNode.textContent = ipNode.value; 
     var evalNode = document.getElementById("Eval"); 
     try { 
      evalNode.textContent = eval(ipNode.value); 
     } catch (e) { 
      evalNode.textContent = e; 
     } 
    } 
</script> 
</head> 
<body> 
<body class="main"> 
<div> 


<p2>Section</p2> 
<p3>Max</p3> 
<p>Comments</p> 
<p1>Mark</p1> 
</div> 
<form action=""> 
<p><textarea rows="6" name="Input" id="Input" cols="61"></textarea> 
<p><textarea rows="6" name="Input" id="Input" cols="61"></textarea> 
<p><textarea rows="6" name="Input" id="Input" cols="61"></textarea> 
<p><textarea rows="6" name="Input" id="Input" cols="61"></textarea> 
<p><textarea rows="6" name="Input" id="Input" cols="61"></textarea> 
<br> 
<br> 
    <input type="reset" value="Clear" name="B2"></p> 
</form> 
<pre id="Output">&nbsp;</pre> 
<pre id="Eval">&nbsp;</pre> 
</body> 
</html>

來源

2016-02-05 JayJay Simpson

你能否澄清一點您的具體問題是什麼？現在看起來有點含糊。 – BurningLights

我編輯了問題 –

你可能很容易簡化你的標記和你的風格。

下面我概述了一種將頁面劃分爲垂直列的方法，該列從左到右跨越頁面，每個頁面寬度爲24%。

<h3>副標題垂直排列，<h2>朝上，他們也排列在右邊兩列<textarea> s。

.column { 
 
display: inline-block; 
 
width: 24%; 
 
vertical-align: top; 
 
} 
 

 
h2 { 
 
color: rgb(255,0,0); 
 
margin-left:35%; 
 
} 
 

 
h3 { 
 
height: 64px; 
 
line-height: 64px; 
 
margin: 24px 0 24px 35%; 
 
} 
 

 
textarea { 
 
height: 60px; 
 
} 
 

 
textarea, input[type="reset"] { 
 
display: block; 
 
margin: 24px auto; 
 
}

<div class="column"> 
 
<h2>Section</h2> 
 

 
<h3>Dynamic</h3> 
 
<h3>Intellij</h3> 
 
<h3>Control</h3> 
 
<h3>Active</h3> 
 
<h3>Database</h3> 
 
</div> 
 

 
<div class="column"> 
 
<h2>Max</h2> 
 
</div> 
 

 
<div class="column"> 
 
<h2>Comments</h2> 
 
<form> 
 
<textarea name="input1" id="input1"></textarea> 
 
<textarea name="input2" id="input2"></textarea> 
 
<textarea name="input3" id="input3"></textarea> 
 
<textarea name="input4" id="input4"></textarea> 
 
<textarea name="input5" id="input5"></textarea> 
 
<input type="reset" value="Clear" name="B2"></p> 
 
</form> 
 
</div> 
 

 
<div class="column"> 
 
<h2>Mark</h2> 
 
</div>

來源

2016-02-06 00:06:35 Rounin

也許你的意思是這樣的：https://jsfiddle.net/v4awe9p8/

small { 
    color: grey; 
    font-size: 0.5em; 
} 

<h1> 
    Title 
    <small>Subtitle</small> 
</h1>

最終版本（見註釋）：https://jsfiddle.net/u34tcaja/

來源

2016-02-05 18:08:50 xotix

謝謝，但多數民衆贊成不完全是我在找什麼，我希望子標題垂直下「部分」標題 –

https://jsfiddle.net/v4awe9p8/1/這？ – xotix

是的，但需要垂直下方的5個字幕，而不是隻有一個 –

如何在標題下垂直添加文本

回答

相關問題