如何在标题下垂直添加文本

我正在创建标记表单，并且有四个标题，一个用于注释，一个用于标记，一个用于标记，最后一个用于标注。如何在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个字幕，而不是只有一个 –

如何在标题下垂直添加文本

回答

相关问题