Question

我正在创建一个标记表单，有四个标题，一个用于评论，一个用于最大，一个用于标记，最后一个用于标记。如何直接在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>

Answer 1

也许你的意思是：https://jsfiddle.net/v4awe9p8/

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

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

最终版本（见评论）：https://jsfiddle.net/u34tcaja/

Answer 2

你可以大大简化你的标记和风格。

下面我概述了一种方法，它将页面划分为垂直列，从左到右跨越页面，每个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>

如何在标题

2 个答案: