元素不符合要求答案

【问题标题】：Elements not coming in line元素不符合要求
【发布时间】：2021-01-20 09:47:20
【问题描述】：

var unitBtn = document.getElementById("dropdown-btn"); // the button which when clicked, a menu will appear
var dropDownContent = document.getElementById("dropdown-content"); // the content to be displayed when the button above is clicked

// the unitBtn is clicked
unitBtn.addEventListener("click", function() {
    // if the visibility is hidden
    if(dropDownContent.style.visibility == "hidden") {
        dropDownContent.style.visibility = "visible";
    } else { // if it is not...
        dropDownContent.style.visibility = "hidden";
    }
});

// the options
var kmBtn = document.getElementById("km");
var metreBtn = document.getElementById("m");
var celsiusBtn = document.getElementById("celsius");
var fahrenheitBtn = document.getElementById("fahrenheit");

kmBtn.addEventListener("click", function() {
    unitBtn.value = kmBtn.value;
    dropDownContent.style.visibility = "hidden";
});

metreBtn.addEventListener("click", function() {
    unitBtn.value = metreBtn.value;
    dropDownContent.style.visibility = "hidden";
});

celsiusBtn.addEventListener("click", function() {
    unitBtn.value = celsiusBtn.value;
    dropDownContent.style.visibility = "hidden";
});

fahrenheitBtn.addEventListener("click", function() {
    unitBtn.value = fahrenheitBtn.value;
    dropDownContent.style.visibility = "hidden";
});


// claculate button being clci
var calculateBtn = document.getElementById("calculate-btn");
calculateBtn.addEventListener("click", function() {
    // hello
});

/* Background-color, title, intro (the general stuff) */
body {
    background-color: rgba(100, 100, 255, 0.4);
}

#title {
    text-decoration: underline;
    font-family: Comic Sans, Comic Sans MS, cursive;
    font-size: 35px;
}

#intro-para {
    font-size: 20px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

/* Now for the options */
#dropdown-content {
    margin-left: 169px;
}

/* in line */
#dropdown-stuff {
    flex-direction: row;
    display: inline;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Conversion</title>

        <!-- CSS -->
        <link rel="stylesheet" href="style.css">
        <style>
            #dropdown-content {
                visibility: hidden;
            }
        </style>
    </head>
    <body>
        <!-- Title and Intro -->
        <h1 id="title">Conversion</h1>
        <p id="intro-para">Don't know how to convert? Too lazy to pop up a calculator? Don't worry, We have you covered!</p>

        <!-- Calculation buttons, inputs and options -->
        <!-- Value 1 -->
        <input type="text" id="value1-btn" placeholder="Value 1">

        <!-- Options so that we know the unit which the user wants to convert -->
        <div id="dropdown-stuff">
        <input type="button" value="Select unit" id="dropdown-btn">
        <div id="dropdown-content">
            <input type="button" value="kilometre" id="km">
            <br>
            <input type="button" value="metre" id="m">
            <br>
            <input type="button" value="celsius" id="celsius">
            <br>
            <input type="button" value="fahrenheit" id="fahrenheit">
        </div>

        <p id="to">to</p>

        <!-- Calculate button -->
        <input type="button" value="Calculate" id="calculate-btn">
        </div>

        <!-- JavaScript -->
        <script src="js.js"></script>
    </body>
</html>

在上面的 HTML 代码中，在 id 为“dropdown-stuff”的 div 中，我放入了一个 p 元素 <p id="to">to</p> 和一个按钮 - <input type="button" value="Calculate" id="calculate-btn">。但是，即使它们位于 #dropdown-stuff

中，它们也不符合我的输入和“选择单元”按钮

我已将#dropdown-stuff 的 CSS 代码如下 -

#dropdown-stuff {
    flex-direction: row;
    display: inline;
}

为什么我的 p 元素和计算按钮不符合下拉按钮和值 1 文本输入？如何解决这个问题？

编辑：我将display 更改为flex。现在它们连续出现，但是计算（#calculate-btn）和下拉（#dropdown-btn）按钮是巨大的块，并且当下拉按钮（#dropdown-btn）出现时出现的选项（#dropdown-content）单击后，选项会显示在按钮的右侧，而不是按钮的底部。

【问题讨论】：

欢迎 flex-direction: 使用 display flex 而非内联

标签： javascript html css

【解决方案1】：

flex-direction: row 只会对display: flex 或display: inline-flex 有效。

所以这可能会给你你正在寻找的东西：

#dropdown-stuff {
    flex-direction: row;
    display: flex;
}

【讨论】：

你好，@Eddie Reeder，现在按钮以大块的形式出现，当我点击“选择单元”（#dropdown-btn）时，选项出现在它的右侧，而不是下方按钮
他们在同一个“行”中（感谢您的帮助），但上述问题仍然存在
您需要将下拉输入和内容包含在它们自己包含的 div 中。我已经解决了您的问题here。 :)
谢谢@Eddie Reeder。