html 对齐中的多个标签

Question

我有以下代码在 html 中定义四个单独的标签：

<label for="months" id="months" >Months</label>
<label for="weeks" id="weeks">Weeks</label>
<label for="fortnights" id="fortnights">Fortnights</label>
<label for="quarters" id="quarters">Quarters</label>

我已经定义了一个 java 脚本函数来在页面加载时隐藏这些标签。我有一个单独的 java 脚本函数，一次只显示一个标签，具体取决于在不同下拉列表中选择的内容。这可以正常工作。

我在这种情况下的问题是标签没有显示在页面上的所需位置。它们显示在不同的地方，有没有办法让这些标签显示在页面的同一个地方而不是不同的地方？

干杯，麦克

嗨，马特，这是我的 JavaScript 函数，用于在页面加载时隐藏标签：

<script type="text/javascript">
            function hideLabels()
            {
                //alert("Entered hideLabels function");
                document.getElementById("months").style.visibility = "hidden";
                document.getElementById("weeks").style.visibility = "hidden";
                document.getElementById("fortnights").style.visibility = "hidden";
                document.getElementById("quarters").style.visibility = "hidden";
            }
        </script>

这是我的 Javascript 函数，它一次只显示一个标签，具体取决于页面上另一个下拉字段的值：

 <script type="text/javascript">
            function FrequencyChange(value)
            {
                if (value == 1)
                {
                    document.getElementById("months").style.visibility = "visible";
                    document.getElementById("weeks").style.visibility = "hidden";
                    document.getElementById("quarters").style.visibility = "hidden";
                    document.getElementById("fortnights").style.visibility = "hidden";
                }
                if (value == 2)
                {
                    document.getElementById("weeks").style.visibility = "visible";
                    document.getElementById("months").style.visibility = "hidden";
                    document.getElementById("quarters").style.visibility = "hidden";
                    document.getElementById("fortnights").style.visibility = "hidden";
                }
                if (value == 3)
                {
                    document.getElementById("quarters").style.visibility = "visible";
                    document.getElementById("months").style.visibility = "hidden";
                    document.getElementById("weeks").style.visibility = "hidden";
                    document.getElementById("fortnights").style.visibility = "hidden";
                }
                if (value == 4)
                {
                    document.getElementById("fortnights").style.visibility = "visible";
                    document.getElementById("months").style.visibility = "hidden";
                    document.getElementById("weeks").style.visibility = "hidden";
                    document.getElementById("quarters").style.visibility = "hidden";
                }
            }

谢谢，麦克

Answer 1

您可以使用 css:

    label{position:absolute;top:0;left:0;}

Answer 2

您也可以将其包含在 html 中。

<label for="months" id="months" style="position:absolute;top:0;left:0;">Months</label>
<label for="weeks" id="weeks"style="position:absolute;top:0;left:0;">Weeks</label>
<label for="fortnights" id="fortnights"style="position:absolute;top:0;left:0;">Fortnights</label>
<label for="quarters" id="quarters" style="position:absolute;top:0;left:0;">Quarters</label>

Answer 3

您需要使用 display 属性而不是 visibility 属性

visibility : 隐藏时，元素对用户隐藏，但元素显示区域仍保持原样

display : 当 none 时，元素从 DOM 中移除，从而恢复元素显示区域

@Mike 使用显示属性

检查我的 plunker 是否适合你的用例

https://plnkr.co/edit/h0dDyZZbmZBbbqfg50Rm

function hideLabels() {
  //alert("Entered hideLabels function");
  document.getElementById("months").style.display = "none";
  document.getElementById("weeks").style.display = "none";
  document.getElementById("fortnights").style.display = "none";
  document.getElementById("quarters").style.display = "none";
}

html 对齐中的多个标签

Multiple labels in html alignment

html

javascript

labels