Why is my - flex display not working?

Question

Why is my - flex display not working?

Asked 3 years, 7 months ago

Viewed 39 times

-2

the HTML code is this- I wanted to put a flex display only in "forms2" for the inputs to be in Row. What should I do?

    <div class="forms1">
        <div class="prontuario"><b>Prontuário:</b> <input type="text"></div>
    </div><!--forms1-->
        
    <div class="forms2">
           <ul>
                <li><b>Nome:</b> <input type="text"></div></li>
                <li><b>CPF:</b> <input type="text"></div></li>
                <li><b>ENDEREÇO:</b> <input type="text"></div></li>
            </ul>
    </div><!--forms2-->

*CSS .forms2{ display: flex; }

Important you [Dit] your question and explain objectively and punctually the difficulty found, accompanied by a [mcve] of the problem and attempt to solve. To better enjoy the site, understand and avoid closures and negativations worth reading What is the Stack Overflow and the Stack Overflow Survival Guide (summarized) in Portuguese.

– Bacco

2021/02/28 at 15:11

1 answer

Browser other questions tagged css flexbox

You are not signed in. Login or sign up in order to post.

by Franklin Barreto • **301** points · Answer 1 · 2021-02-27T16:35:12+00:00

First you need to fix the html structure, you have a lot of Divs closing without opening in Lis. Then you need to apply the style in ul and not in div.

    <div>
    <ul class="forms2">
        <li><b>Nome:</b> <input type="text" /></li>
        <li><b>CPF:</b> <input type="text" /></li>
        <li><b>ENDEREÇO:</b> <input type="text" /></li>
    </ul>
</div>

And now apply the style

.forms2 {
        display: flex;
        flex-direction: row;
    }