时间戳

首页 > 解决方案 > 如何调整 HTML onclick 的大小？我将如何使两个 onclick 功能彼此相邻？

html - 如何调整 HTML onclick 的大小？我将如何使两个 onclick 功能彼此相邻？

问题描述

<!DOCTYPE html>
<html>
<style>

@media only screen and (max-width: 600px) {
    p {

        background-color:powderblue;
    }
}

.row {
    display: flex;
    flex-wrap: wrap;
    padding: 0 4px;
}

.column {
    padding: 0 4px;
    flex: 20%;
}

我不确定这是否真的在做任何事情

.onclick{
    width: 20px;
    height: 20px;
}



</style>
<body>

我希望这两个 onclicks 彼此相邻

<table style="width:100%">
    <tr>
        <p id="demo" onclick="myFunction1()">Click me.</p>
    </tr>
    </tr>
        <p id="funct" onclick="myFunction2()">Click me.</p>
    </tr>
</table>

这部分详细说明了函数的作用

<script>
    function myFunction1() {
        if (document.getElementById("demo").innerHTML == "Click me."){
            document.getElementById("demo").innerHTML = "YOU CLICKED ME!";
        }
        else{
            document.getElementById("demo").innerHTML = "Click me.";
        }
    }
    function myFunction2() {
        if (document.getElementById("funct").innerHTML == "Click me."){
            document.getElementById("funct").innerHTML = "YOU CLICKED ME!";
        }
        else{
            document.getElementById("funct").innerHTML = "Click me.";
        }
    }
</script>

</body>
</html>

标签： html

解决方案

您可以在不同的行中看到您的段落，因为您将它们放置在表格的不同行中。

改成

<table style="width:100%">
    <tr>
        <td>
            <p id="demo" onclick="myFunction1()">Click me.</p>
        </td>
        <td>
            <p id="funct" onclick="myFunction2()">Click me.</p>
        </td>
    </tr>
</table>

它们将被放置在同一行。

在 HTML 表格中：

  • <tr>标签开始一个新行
  • </tr>标签结束当前行
  • <td>标签在当前行开始一个新框
  • </td>标签结束当前行中的当前框

无论如何，虽然它不是当前问题的对象，但我建议您找到一种不同于表格的方式来组织您的网页。看看<div>s + CSS。

推荐阅读