CSS：显示：内联块；
[英]CSS: Display: inline-block;
问题描述
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? 我想我必须在某处禁用： display: inline-block但在我尝试过的所有地方都行不通？ 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 个解决方案
解决方案1
0 2019-03-16 11:00:21
You can use clear: both for menu::after to move elements after it down below like so: 您可以对menu::after使用clear: both来将元素向下移动，如下所示：
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
CSS和显示：内联块 - CSS and display: inline-block
显示：inline-block in CSS - display: inline-block in CSS
使用display：inline-block的CSS问题 - CSS issue with using display:inline-block
CSS表显示：内联块 - CSS table display: inline-block
CSS溢出：隐藏与显示：内联块 - css overflow:hidden with display:inline-block
CSS显示：内联块| 3列| 没有花车 - CSS Display:inline-block | 3 columns | No floats
CSS“显示：3列的行内块” - css “ display: inline-block for 3 column”
CSS属性显示问题：内联块 - Problem with CSS property display: inline-block
CSS显示：内联块问题 - css display: inline-block issue
JS.style.display = “inline” 将在 CSS 中显示为“inline-block” - JS .style.display = “inline” Will display as “inline-block” in CSS
相关标签