我尝试在此处创建多列菜单( 更新的链接HERE ):

我使用display: inline-block策略来制作(水平)行。 似乎可行。 但是,当我将其包装到带有position:relativespan时,它将停止工作。

<section>
    <button>123</button>
    <button>123</button>

    <span class="dropdown">
    <a href="#">*</a>    <!-- this is a link that should be inline with buttons -->

            <div class="menu">
                <div class="row">
                    <ul>
                        <li>11111111111111111111111111</li>
                        <li>1111111111111</li>
                        <li>111</li>
                    </ul>
                </div>
                <div class="row">
                    <ul>
                        <li>2222222222</li>
                        <li>222222222222222222222</li>
                    </ul>
                </div>
                <div class="row">
                    <ul>
                        <li>33</li>
                        <li>33</li>
                        <li>33</li>
                    </ul>
                </div>
            </div>    
</span>
</section>

在该HREF链接span表示一个按钮或链接,我会点击,使菜单出现。 我必须在跨度中具有相对位置,以使菜单相对于它出现在正确的位置。 (所有按钮和链接应在同一水平线上)

问题:如何使其工作?

尽管如果我将span更改为div并为其设置固定width:600px (如width:600px (并且此宽度或多或少是菜单宽度以使其像预期的那样工作,这很奇怪),它是可行的,但是/所以我想要它span (无特定/硬编码宽度)。

更新

我已经更新了示例,以显示如何将span作为块和按钮使用: http : //jsfiddle.net/uz0do787/32/

只需添加一些以前的演示中未显示的细节,以显示我想要的内容。 我希望所有按钮和href链接都在同一行,但是使范围“ display:block”会破坏该顺序。

#1楼 票数:1

只需添加display:block ,以span

演示

了解为什么需要添加display:block

HTML <span>元素是用于表达内容的通用内联容器,它本质上不代表任何内容。 它可以用于对元素进行分组以进行样式设置(使用class或id属性),或者因为它们共享属性值(例如lang)。 仅当没有其他语义元素合适时才应使用它。 <span>非常像一个元素,但是<div>是一个块级元素,而<span>是一个内联元素。

资料来源: Mozilla开发人员网络

#2楼 票数:1

你的意思是这样的?: 小提琴

.dropdown {
    position:relative;
    display: block;
    padding: 10px;
}

a {
   position:absolute;
   top: -15px;
   left: 100px;
    }

#3楼 票数:0

跨度-这是一个内联元素。 您不能使用内联元素包装代码块。 要使其与跨度一起使用,请添加“ display:block;” .dropdown的属性

喜欢:

.dropdown {
    position:relative;
    display: block;
}

#4楼 票数:0 已采纳

我想如果通过切换到display:table来修复它,那么我可以继续使用span而不试图使其阻塞,并且它不会跳到下一行:

之前: http : //jsfiddle.net/uz0do787/32/

http://jsfiddle.net/uz0do787/34/

但是无论如何,我认为都存在重构的空间-菜单应该独立于js通过x,y显示,取决于范围/链接位置,以免DOM彼此之间以及不要那么脆弱。

我只是不明白,为什么当我应用“ display:table”(针对我提出的解决方案/答案)时,跨度会通过按钮保持在原位,而使用“ display:inline-block”时,跨度会中断菜单布局。 与内联块解决方案相比,display:table的工作原理与预期的一样。

  ask by ses translate from so

未解决问题?本站智能推荐:

4回复

使用display:inline-block的CSS问题

我设置了4个div宽度:120px放置在240px宽度的包装纸内。 JSFiddle在这里-http: //jsfiddle.net/s7dxxro0/1/ HTML: CSS: 但是,由于对我的4个块应用了少量边距,因此元素不会彼此相邻显示。 这似乎是从哪里来
1回复

如何正确使用CSS“ display:inline-block”?

使用此html / css编码时出现布局问题。 实际上,我希望符号垂直于div的中心对齐。 第二种布局显示效果很好,在子div上将float值设置为左侧。 第一种布局有什么问题。 有任何想法吗? 这是代码
2回复

如何用position:absolute;创建CSS3图表 在具有display:inline-block;的框内工作;

请,没有JavaScript。 可以想象一下。 包含数百个框的页面,每个框包含一个笑话,引用,图像...(所有带有display:inline-block;的框)。 现在,我试图放置一个带有一些带有position:absolute;组件的图表。 左:在display:inlin
1回复

html,css-如何使用display:inline-block

为什么第二行的前三个元素未对齐? 以及我该如何解决? 我可以使用float来修复它,但是还有其他方法可以修复它。 http://jsfiddle.net/yeqmpp5q/
7回复

CSS:display:inline-block无法正确对齐div

尽管我知道基本概念是正确的,但在使div正确对齐方面遇到了一些麻烦。 我想要的是使较大的div(绑定)在同一行上具有标题,红利和图像,但是当前红利显示在标题字段下方。 有任何想法吗? 有问题的CSS: HTML的简化版本: 提前致谢。
1回复

jQuery append()与CSS的怪异互动display:inline-block

我正在尝试创建一个网页,其中两个div部分水平并排显示。 我想在其中之一中添加随时间变化的内容。 我注意到,如果我使用css display:inline-block对齐两个div部分,然后使用append()在第一部分中插入一个段落,则将第二部分向下推以与该段落块对齐。 我知道我可以通过
2回复

使用display:inline-block进行无序列表换行

因此,我正在研究必须在HTML和CSS中模拟输入的项目。 在输入中,我应该能够调用以下函数: my_cool_function(param0, param1, param2, param3) 。 因此,为了模拟输入,我创建了一个无序列表,并在ul中添加了该函数作为令牌。 因此my_cool
3回复

如何居中 - display:block/inline-block

在 html 和 css 中居中时,我找到了两种方法 - 要么应用于元素: 或使用: 我总是想知道哪个更好,为什么。 谢谢!!