我是网络开发的初学者，正在构建我的第一个交互式网页。我遇到了一个具体问题，希望有人能帮助我。这是我的第一个问题，所以如果我忘记提及或发布所有信息，我提前道歉。对于长代码感到抱歉 :)(我试图删除所有不相关的内容)。
所以...我想内联显示列 (class="column")，但它们显示一个在另一个下面。一个可能的问题可能与以下事实有关:列位于绝对定位框内(class="menu"-> 鼠标悬停时变为 class="active"- 看看 JavaScript!)，它位于相对框内(class="类别”)。
我做了一个 JSFiddle:https://jsfiddle.net/Kokata/s5gjp8qz/3/
HTML:
<body>
`<div id="filters">
<h3>Categories</h3>
<ul id="categories">
<li class="category" id="one">
<div class="menu">
<ul class="subcategories">
<li> Item 1 </li>
<li> Item 2 </li>
<li> Item 3 </li>
</ul>
</div>
<h4> Category 1 heading </h4>
</li>
<li class="category" id="two">
<div class="menu">
<div class="column">
<h4> Column heading </h4>
<ul class="subcategories">
<li> Item 1 </li>
<li> Item 2 </li>
<li> Item 3 </li>
</ul>
</div>
<div class="column">
<h4> Second column </h4>
<ul class="subcategories">
<li> Item 1 </li>
<li> Item 2 </li>
<li> Item 3 </li>
</ul>
</div>
</div>
<h4> Category 2 heading </h4>
</li>
</ul>
</div>`
</body>
CSS:
#filters {
display: inline-block;
float: left;}
h3 {
width: 220px;
background-color: black;
color: white;
padding: 3px 5px;
margin: 0 0 2px 0;}
ul {
list-style-type: none;
padding: 0;
margin: 2px 0;}
.category {
position: relative;}
h4 {
width: 220px;
padding: 3px 5px;
margin: 2px 0;}
.menu {
display: none;}
.active {
padding: 3px;
border: 1px solid black;
position: absolute;
display: block;
left: 230px;
z-index: 10;}
.column {
width: 120px;
display: inline-block;
vertical-align: top;}
JavaScript:
$(function(){
// OPEN AND CLOSE MENUS
$('.category').on('mouseover', function() {
// When user moves over category...
$(this).children('.menu').removeClass('menu').addClass('active');
// remove class menu and add class active
});
$('.category').on('mouseout', function() {
// When user moves down from category...
$(this).children('.active').removeClass('active').addClass('menu');
// remove class active and add class menu
});
});
最佳答案
我不确定这就是您想要的，但请看一下 fork看看这是否是您想要的。
具体来说，我将 .column 的 width 更改为 min-width，并添加了 display: inline 到 .column ul li
.column {
min-width: 120px;
display: inline-block;
vertical-align: top;}
.column ul li { display: inline; }
或者，尝试在 css 中的 .active 类中添加 width ，比如 245px。
关于jquery - css 内联元素在相对框内的绝对框内，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28939812/