Блог

Главная - Вопросы по программированию - Элементы, не входящие в строку

Элементы, не входящие в строку

#javascript #html #css

#javascript #HTML #css

Вопрос:

 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-коде в div с идентификатором «выпадающий список» я вставил элемент p <p id="to">to</p> и кнопку — <input type="button" value="Calculate" id="calculate-btn"> . Однако они не соответствуют моему вводу и кнопке «выбрать единицу», даже если они находятся в #dropdown-stuff

Я поместил код CSS для #dropdown-stuff , как показано ниже —

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

Почему мой элемент p и кнопка вычисления не соответствуют кнопке выпадающего списка и значению ввода текста 1? Как это исправить?

РЕДАКТИРОВАТЬ: я изменил значение display flex . Теперь они идут подряд, однако кнопки calculate (#calculate-btn) и dropdown (#dropdown-btn) представляют собой ОГРОМНЫЕ блоки, а опции (#dropdown-content), которые появляются при нажатии кнопки dropdown (#dropdown-btn), отображаются справа откнопка, а не в нижней части кнопки.

Комментарии:

1. Приветствуется flex-direction: работа с гибким отображением, не встроенным

Ответ №1:

flex-direction: row будет иметь эффект только для display: flex or display: inline-flex .

Так что это может дать вам то, что вы ищете:

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

Комментарии:

1. Привет, @Eddie Reeder, теперь кнопки отображаются в виде ОГРОМНЫХ блоков, и когда я нажимаю «Выбрать единицу» (#выпадающий список-btn), параметры отображаются справа от него, а не под кнопкой

2. Они поступают в одну и ту же «строку» (спасибо за помощь), но вышеуказанная проблема сохраняется

3. Вам нужно было вложить свой выпадающий ввод и содержимое в их собственный div, содержащий div. Я исправил вашу проблему здесь . 🙂

4. Спасибо, @Eddie Reeder.