Why is the label inside the checkbox after setting the display to inline?-CodePudding

I think its because of display: flex; how can I make the label on same row as the checkbox? also why is the checkbox not centered?

.options_display {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

.options_style * {
    text-align: center;
    font-size: medium;
    font-family: arial;
    padding: 0px;
    margin-bottom: 2px;
    width: 225px;
    height: 25px;
}

* {
    box-sizing: border-box;
}

p {
    margin: 0px;
}

[hidden] {
    display: none;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Kalkulačka</title>
        <link rel="stylesheet" href="Style/Main.css">
        <meta name="viewport" content="width=device-width">
    </head>
    <body>
        <div style="float: left; position: relative; left: 50%;">
            <div style="float: left; position: relative; left: -50%;">
                <div >
                    <select>
                        <option>Select test</option>
                        <option>Option 0</option>
                        <option>Option 1</option>
                        <option>Option 2</option>
                    </select>
                    <input type="number" placeholder="Input test">
                    <div style="display: inline;">
                        <input type="checkbox" id="test">
                        <label for="test">Test</label>  
                    </div>
                    <button onclick="">Button test</button>
                    <p>Text</p>
                </div>
            </div>
        </div>
    </body>
</html>

CodePudding user response：

Why is the label not inside the checkbox?

It's because the style rules from .options_style * are applied to both the label and the checkbox, that style rule specified the width to elements they apply to. Thus, in this case, both the checkbox and the label has 225px width, and since their parent has display: inline, while the elements are not inline and have widths more than the container, one of them will have to go to the new line. A quick fix would be to change that display: inline to display: flex, and make the width property of the label and the checkbox to be auto. But to make it a bit better I also added some improvement of the stylings on my code below.

.options_display {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

.options_style * {
    text-align: center;
    font-size: medium;
    font-family: arial;
    padding: 0px;
    margin-bottom: 2px;
    width: 225px;
    height: 25px;
}

* {
    box-sizing: border-box;
}

p {
    margin: 0px;
}

[hidden] {
    display: none;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Kalkulačka</title>
        <link rel="stylesheet" href="Style/Main.css">
        <meta name="viewport" content="width=device-width">
    </head>
    <body>
        <div style="float: left; position: relative; left: 50%;">
            <div style="float: left; position: relative; left: -50%;">
                <div >
                    <select>
                        <option>Select test</option>
                        <option>Option 0</option>
                        <option>Option 1</option>
                        <option>Option 2</option>
                    </select>
                    <input type="number" placeholder="Input test">
                    <div style="display: flex;margin: 0 auto;justify-content: center;align-items: center;">
                        <input type="checkbox" id="test" style="width: auto">
                        <label for="test" style="width: auto; height: auto">Test</label>  
                    </div>
                    <button onclick="">Button test</button>
                    <p>Text</p>
                </div>
            </div>
        </div>
    </body>
</html>

CodePudding user response：

.options_style option {
   text-align: center;
   font-size: medium;
   font-family: arial;
   padding: 0px;
   margin-bottom: 2px;
   width: 225px;
   height: 25px;
}

apply the above mentioned class ".options_style" only to the "option" of "select" element not to all the contents of "div" element.