Why is my display: inline-block; behaving like a block?
Question
I'm attempting to get my boxes of paragraphs to appear next to each other in the given container, but when I set them to display: inline-block; they still display as if they were set to display: block;
#container { border: 1px solid black; width: 50%; margin: 0 auto; } #container section { width: 400px; border: 1px solid red; display: inline-block; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" href="app-mc.css"> <title>Display</title> </head> <body> <div id="container"> <section> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit, Ipsa deserunt distinctio vel quis mollitia illum minima qui harum architecto praesentium, iure, a obcaecati. ipsam aliquam ut totam excepturi vero enim,</p> </section> <section> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit, Ipsa deserunt distinctio vel quis mollitia illum minima qui harum architecto praesentium, iure, a obcaecati, ipsam aliquam ut totam excepturi vero enim!</p> </section> </div> </body> </html>
1 answers
solution1
0 2022-08-04 23:35:55
The reason is that you applied a fixed width for the inline-blocks (400px) that won't fit into the parent element twice. Use a percentage width instead:
#container { border: 1px solid black; width: 50%; margin: 0 auto; } #container section { width: 48.5%; border: 1px solid red; display: inline-block; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" href="app-mc.css"> <title>Display</title> </head> <body> <div id="container"> <section> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit, Ipsa deserunt distinctio vel quis mollitia illum minima qui harum architecto praesentium, iure, a obcaecati. ipsam aliquam ut totam excepturi vero enim,</p> </section> <section> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit, Ipsa deserunt distinctio vel quis mollitia illum minima qui harum architecto praesentium, iure, a obcaecati, ipsam aliquam ut totam excepturi vero enim!</p> </section> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
`inline-block` behaving like `block`
Element behaving like block despite being inline-block
Why is Google Chrome not respecting my display:inline-block property?
Why doesn't display:inline-block work for my HTML?
Why use display:inline-block?
Why an image with 100% width in inline-block behaving as responsive image
Why is this div with an inline-block span behaving differently than normal
Why are my inline-block divs not aligning?
display: inline, inline-block and block - Bootstrap
Why does image use display: inline but behaves like an inline-block element
Related Tags