- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
您可能已经在我以前的帖子中看到,我正在研究 Office 功能区的 HTML 实现,以用于 Web 应用程序。
目前功能区是这样的:
现在,我创建了一个下拉菜单,所以当您单击元素时,会显示一个下拉菜单,如下所示:
如您所见,当下拉菜单可见时,元素“新元素”占用的空间确实增加了。我想实现以下目标:
在 HTML 中,下拉项是菜单项的一部分。这是 HTML 以使其清楚:
<div class="icon bigicon">
<img src="Resources/Icons/MailNewItemMenu.png" />
<div class="label">
New<br/>Items
</div>
<div class="menu">
<div class="menucontents">
<ul class="nopadding nomargin">
<li>E-Mail Message</li>
<li>Appointment</li>
<li>Meeting</li>
<li>Contact</li>
<li>Task</li>
<li>E-Mail Message Using</li>
<li>More items</li>
<li>Lync Meeting</li>
</ul>
</div>
</div>
</div>
CSS 如下(我知道这不是最佳实践,我将对其进行调整):
#OfficeUI .ribbon .tabs > ul li[role=tab] .contents .group .icongroup .icon { text-align: center; display: inline-block; padding-top: 2px; padding-left: 3px; padding-right: 3px; vertical-align: top; }
#OfficeUI .ribbon .tabs > ul li[role=tab] .contents .group .icongroup .bigicon { height: 70px; }
#OfficeUI .ribbon .tabs > ul li[role=tab] .contents .group .icongroup .smallicon { padding-top: 0px; height: 24px; }
#OfficeUI .ribbon .tabs > ul li[role=tab] .contents .group .icongroup .icon:hover { background-color: #cde6f7; }
#OfficeUI .ribbon .tabs > ul li[role=tab] .contents .group .icongroup .icon:active { background-color: #92C0E0; }
#OfficeUI .ribbon .tabs > ul li[role=tab] .contents .group .icongroup .icon .label { line-height: 16px; }
#OfficeUI .ribbon .tabs > ul li[role=tab] .contents .group .icongroup .smallicon { display: inline-block; padding-right: 5px; }
#OfficeUI .ribbon .tabs > ul li[role=tab] .contents .group .icongroup .smallicon IMG { vertical-align: middle; }
#OfficeUI .ribbon .tabs > ul li[role=tab] .contents .group .icongroup .smallicon .label { display: inline-block; }
#OfficeUI .ribbon .tabs > ul li[role=tab] .contents .group .icongroup .icon .menu { position: relative; top: -1px; left: 1px; box-shadow: 0px 0px 0px #888888;}
#OfficeUI .ribbon .tabs > ul li[role=tab] .contents .group .icongroup .icon .menu .menucontents { padding: 1px; position: relative; z-index: 100; background-color: white; left: -4px; border-top: 1px solid #C6C6C6; border-bottom: 1px solid #C6C6C6; background-image: linear-gradient(#C6C6C6, #C6C6C6), linear-gradient(#C6C6C6, #C6C6C6); background-size:1px 100%; background-position: 0 0, 100% 0; background-repeat: no-repeat; box-shadow: 1px 1px 2px #E0E0E0; }
#OfficeUI .ribbon .tabs > ul li[role=tab] .contents .group .icongroup .icon .menu .menucontents > ul li { text-align: left; list-style: none; margin-left: 1px; margin-right: 1px; padding-left: 5px; padding-right: 5px; }
#OfficeUI .ribbon .tabs > ul li[role=tab] .contents .group .icongroup .icon .menu .menucontents > ul li:hover { background-color: #cde6f7; }
如果您对该元素感兴趣,请查看:https://github.com/Kevin-De-Coninck/OfficeWebControls
这里有一个 JsFiddle 可以用来检查它。在 fiddle 中,向下箭头没有显示(不知道为什么),但是如果我用绝对位置和相对位置来解决这个问题,向下箭头就不再显示了。
有人可以看看 JsFiddle 并更正它吗?提前致谢:http://jsfiddle.net/Complexity/P5Bnc/3/
亲切的问候,
凯文
最佳答案
由于没有活生生的例子,我只能提供指导:
position: relative
添加到.icon
或.bigicon
.icon .menu
更改为 position:absolute
top:100%
和适当的 margin-top
修复下拉列表的位置,因为它现在将被绝对定位如果您创建一个隔离的 JSFiddle , 为您的问题提供特定的解决方案会更容易。 :)
关于javascript - 内部 DIV 使外部 DIV 增长 - 如何避免?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22658955/
如何指示 webpack 排除所有 d3 模块? // does not work externals: { "d3-*": "d3" } 所以如果应用导入了d3-submod
这个问题在这里已经有了答案: 9年前关闭。 Possible Duplicate: What does “outer =>” really mean? 我在哪里可以找到有关信息 trait After
这是一个简单的循环,我正在尝试对性能进行基准测试。 var extremeLoop=function(n){ var time=new Date() var t=0; for(
问题+概述 下面是两个片段,其中包含最初隐藏的 div,然后通过单击 button 和 jQuery 的 .show() 显示。两个 div 都具有由外部样式表应用的 display: grid; 样
我有一个 HTML 页面和一个单独的 .js 文件,该文件包含在带有 的页面中标签。 这是我的 .js 文件: element = document.getElementById("test");
我在 linux 静态库项目中有 3 个文件,我想在两个类方法实现文件中使用的静态字段存在链接问题。我有 class1.h、class1main.cpp 和 class1utils.cpp。 clas
我正在尝试将颜色背景更改为默认背景颜色,当我点击输入框外 我尝试使用“null”或“none”但没有用? window.addEventListener('click', outsideClick);
我正在编写一个应用程序,要求用户在手机上选择各种类型的文件。我使用此代码启动文件选择器 Intent : Intent intent = new Intent(Intent.ACTION_GET_C
在 android 中,不可移动(内部)的外部存储和内部存储有什么区别?我不确定在哪里保存我的数据。我只需要保存一个人可以随时提取的游戏统计数据 谢谢 最佳答案 在许多较新的设备中,将不再有物理区别,
在 C++ 中,假设我们有这个头文件: myglobals.h #ifndef my_globals_h #define my_globals_h int monthsInYear = 12; #en
我正在尝试使用 externs 在 C++ 中连接到 Ada。这两种实现有什么区别? 实现A namespace Ada { extern "C" { int getN
这个问题在这里已经有了答案: Get selected element's outer HTML (30 个答案) 关闭 2 年前。 想象一下我们有这样的东西: Hello World 如果我们这样
假设我在模块的顶部有这个: Public Declare Function getCustomerDetails Lib "CustomerFunctions" () As Long 如果我从 VB6
我目前正在使用这段代码: var wordRandomizer = { run: function (targetElem) { var markup = this.creat
我们正在使用 SVN 试水,并以 Beanstalk 作为主机。我们的设置如下所示: 存储库:模块 模块一 模块二 模块 3 存储库:网站1 自定义网站代码 svn:对模块 1 的外部引用 svn:对
有没有办法在负载均衡器中设置自动外部 IP 分配给像谷歌这样的服务? 我在裸机上运行 Kubernetes。 谢谢 最佳答案 使用 nodePort 类型的服务,它会将您的服务绑定(bind)到所有节
是否有可能在 Controller 之外使用 generateUrl() 方法? 我尝试在带有 $this->get('router') 的自定义存储库类中使用它,但它没有用。 更新 我在这里找到了一
我目前正在尝试通过 Webpack 外部对象外部化 Angular 依赖项来缩短构建时间。到目前为止,我已经为 React 和其他小库实现了这一目标。 如果我只是移动 '@angular/compil
我想创建一个自动应用其他插件的插件(外部插件)。这要求在我称为“应用插件”之前为插件设置构建脚本依赖项。但是似乎我无法在插件中添加buildscript依赖项,或者得到了: 您不能更改处于未解析状态的
我是R包的创建者EnvStats . 有一个我经常使用的函数,叫做 stripChart .我刚开始学习ggplot2 ,并在过去几天里仔细研究了 Hadley 的书、Winston 的书、Stack
我是一名优秀的程序员,十分优秀!