Question

我是HTML / CSS / JS的初学者。我试着试试＆＃34;显示：＆＃34;等等除了一件事，一切似乎都很好。我添加的块应该完全在同一条线上，但是右边的块总是比左边的块稍微多一点。我尝试添加高度，更改值等但似乎没有任何帮助，所以我决定在这里发布。此外，按钮＆＃34;警告＆＃34;为什么似乎没有用？

https://jsfiddle.net/6qwqjctu/2/

<body background="assets/images/wallpaper.png">
    <header style="font-size:40px" class="indextitle">
<strong>Testing</strong>

    </header>
    <br>
    <br>
    <section class="firstblock">
<code>
<strong>1st new: </strong> <div id="dn1">None</div>
<strong>2nd new: </strong> <div id="dn2">None</div>
<strong>3rd new: </strong> <div id="dn3">None</div>
<strong>4th new: </strong> <div id="dn4">None</div>
</code>

    </section>
    <br>
    <br>
    <section class="secondblock">
<code>
<strong>First: </strong> <div id="d1">None</div>
<strong>Second: </strong> <div id="d2">None</div>
<strong>Third: </strong> <div id="d3">None</div>
<strong>4th: </strong> <div id="d4">None</div>

</code>

    </section>
    <br>
    <br>
    <hr id="clear">
    <section class="buttonone" onclick="alertaction()">alert</section>
    <footer>
        <p style="font-size:25px">&copy; Nobody</p>
    </footer>
    <script src="script.js"></script>
</body>

Answer 1

您的问题是您的部分之间有2 <br/>。删除那些。

所以你最终会得到这个：

<section class="firstblock">
    <code>
        <strong>1st new: </strong> <div id="dn1">None</div>
        <strong>2nd new: </strong> <div id="dn2">None</div>
        <strong>3rd new: </strong> <div id="dn3">None</div>
        <strong>4th new: </strong> <div id="dn4">None</div>
    </code>
</section>
<section class="secondblock">
    <code>
        <strong>First: </strong> <div id="d1">None</div>
        <strong>Second: </strong> <div id="d2">None</div>
        <strong>Third: </strong> <div id="d3">None</div>
        <strong>4th: </strong> <div id="d4">None</div>
    </code>
</section>

关于按钮：

避免使用onClick属性。请改用点击侦听器。另外，如果是按钮，请使用button标记。

这样的事情：

＆＃13;

var bar = document.getElementById('bar');

bar.onclick = function(event) {
  alert('click')
}

＆＃13;

<button id="bar">Alert</button>

＆＃13;

Answer 2

<br>用于在此处导致问题的换行符，我很困惑为什么您在第一次<br>之后尝试使用<section>标记。

我也对你在各地大量使用<section>感到困惑。我将按钮从<section>更改为普通<button>。查看更新的代码：http://plnkr.co/edit/cNgXcU5dNoGmRPD6Hu10?p=info

点击查看详细内容difference between <section> and <div>.

为什么这些块定位不正确，一切似乎都正确？

2 个答案: