繁体   English   中英

css:display:inline-block和span与position:relative建立多列下拉列表

css: display:inline-block and span with position:relative to build multi-column dropdown

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我尝试在此处创建多列菜单( 更新的链接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”会破坏该顺序。

4 个回复

只需添加display:block ,以span

演示

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

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

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

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

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

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

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

喜欢:

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

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

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

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

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

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

1 使用display:inline-block的CSS问题

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

2014-09-12 09:55:59 4 123   html/ css
2 如何正确使用CSS“ display:inline-block”?

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

2012-10-04 08:59:52 1 1586   html/ css
3 CSS:display:inline-block不可见填充

http://jsfiddle.net/QYtnL/ 如何删除烦人的填充,使所有div的高度为0px? 如果我要删除display:inline-block; ,它不见了,但我需要inline-block 。 ...

2013-03-12 16:00:34 2 3116   css
5 CSS“ display:inline-block”拒绝换行[关闭]

我正在开发一个项目,并且尝试以一种特定的链接类型设置样式,就像Adi Palaz 在此定义外部链接所使用的方式一样。 我的代码设置与他的代码相同,但是出于某些原因display: inline-block溢出了包含的&lt;li&gt;元素(具有定义的宽度),因此列表元素并排堆叠2。 有 ...

6 使用display:inline-block时CSS样式问题-chrome

问题是当名称超过并且应用了最大宽度时,world div中的背景图像似乎未对齐(出现在上方),而未应用最大宽度的名称正确显示了该图像。 想法是名称和图像应该在同一行中,名称中心对齐,图像旁边。 如果名称超过该值,则应将其截断,以使该图像不会在下一行显示。 我正在提供背景图片,因为我在 ...

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

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

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

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

10 与display:inline-block` CSS属性有关的问题[重复]

这个问题已经在这里有了答案: 将嵌入式块DIV对齐到容器元素的顶部 4个答案 为什么将内联块元素向下推? 8个答案 我最近对另一个用户做出了一个答案,该答案关于JQuery :: slideUp()顺序多个项目的通用方法。 如果需要参考,可以在这里查看 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM