CSS: Display: inline-block;
Question
I have a problem. I have to do this.
but I get this
I think I have to disable somewhere: display: inline-block but in all the places I tried It doesn't work? Does anyone know how to make them one by one? First boxes are a menu, second tables. That is, I have to put the table under the menu. But how?
body { } .menu { list-style-type: none; margin: 0px; padding: 0px; } .menu-item { background: cornsilk; color: crimson; margin-left: 20px; margin-right: 20px; text-align: center; float: left; border-style: solid; border-width: 5px; border-color: black; } .menu-item a { text-decoration: none; color: crimson; font-weight: bold; padding: 20px; width: 80px; display: inline-block; } .menu-item a:hover { background: crimson; color: cornsilk; } section { display: inline-block; } article { width: 160px; background: whitesmoke; padding: 20px; margin: 20px; display: inline-block; vertical-align: top; float: left; } aside { width: 160px; display: inline-block; vertical-align: top; background: whitesmoke; float: left; padding: 20px; margin: 20px; } .text { margin-top: 10px; font-size: 19px; margin-bottom: 10px; background: whitesmoke; }
<body bgcolor="cadetblue"> <nav> <ul class="menu"> <li class="menu-item"> <a href="#"> Link 1 </a> </li> <li class="menu-item"> <a href="#"> Link 2 </a> </li> <li class="menu-item"> <a href="#"> Link 3 </a> </li> <li class="menu-item"> <a href="#"> Link 4 </a> </li> <li class="menu-item"> <a href="#"> Link 5 </a> </li> </ul> </nav> <section> <article> <div class="text"> This is the left column </div> <img src="http://placehold.it/150x150"> </article> </section> <section> <aside> <div class="text"> This is the right column </div> <img src="http://placehold.it/150x150"> </aside> </section> </body>
1 answers
solution1
0 2019-03-16 11:00:21
You can use clear: both for menu::after to move elements after it down below like so:
body { } .menu { list-style-type: none; margin: 0px; padding: 0px; } .menu::after { content: ""; display: table; clear: both; } .menu-item { background: cornsilk; color: crimson; margin-left: 20px; margin-right: 20px; text-align: center; float: left; border-style: solid; border-width: 5px; border-color: black; } .menu-item a { text-decoration: none; color: crimson; font-weight: bold; padding: 20px; width: 80px; display: inline-block; } .menu-item a:hover { background: crimson; color: cornsilk; } section { display: inline-block; } article { width: 160px; background: whitesmoke; padding: 20px; margin: 20px; display: inline-block; vertical-align: top; float: left; } aside { width: 160px; display: inline-block; vertical-align: top; background: whitesmoke; float: left; padding: 20px; margin: 20px; } .text { margin-top: 10px; font-size: 19px; margin-bottom: 10px; background: whitesmoke; }
<body bgcolor="cadetblue"> <nav> <ul class="menu"> <li class="menu-item"> <a href="#"> Link 1 </a> </li> <li class="menu-item"> <a href="#"> Link 2 </a> </li> <li class="menu-item"> <a href="#"> Link 3 </a> </li> <li class="menu-item"> <a href="#"> Link 4 </a> </li> <li class="menu-item"> <a href="#"> Link 5 </a> </li> </ul> </nav> <section> <article> <div class="text"> This is the left column </div> <img src="http://placehold.it/150x150"> </article> </section> <section> <aside> <div class="text"> This is the right column </div> <img src="http://placehold.it/150x150"> </aside> </section> </body>
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
CSS and display: inline-block
display: inline-block in CSS
CSS issue with using display:inline-block
CSS table display: inline-block
css overflow:hidden with display:inline-block
CSS Display:inline-block | 3 columns | No floats
css “ display: inline-block for 3 column”
Problem with CSS property display: inline-block
css display: inline-block issue
JS .style.display = “inline” Will display as “inline-block” in CSS
Related Tags