html怎么移动按钮位置,CSS Nav按钮向左下方移动(CSS Nav buttons move bottom left)
CSS Nav按钮向左下方移动(CSS Nav buttons move bottom left)
导航按钮位于图像标题div的顶部。 两者都悬停下降。 当转到下一个图像时，导航按钮位于正确的位置，但是当您单击上一个时，整个导航屏幕将移至右下角！
nav {
position: absolute;
width: 100%
height: 20px;
padding-bottom: 2px;
z-index: 1;
float: right;
margin-top: -20px;
transition: margin-top 200ms ease-in;
background: black;
opacity: 0.4;
right: 1px;
}
.title {
position: absolute;
width: 85%;
height: 20px;
padding-bottom: 2px;
margin-top: -25px;
transition: margin-top 200ms ease-in;
background: black;
color: white;
opacity: 0.6;
}
.title-text {
float: left;
padding-left: 5px;
}
.slides:hover .title {
margin-top: 0px;
}
这是一个小提琴的链接 。
The nav buttons sit on top of the image title div. Both drop down on hover. When going to the next image, the nav buttons are at the correct location, but when you click on the previous, the whole nav screen shifts to the bottom right!
nav {
position: absolute;
width: 100%
height: 20px;
padding-bottom: 2px;
z-index: 1;
float: right;
margin-top: -20px;
transition: margin-top 200ms ease-in;
background: black;
opacity: 0.4;
right: 1px;
}
.title {
position: absolute;
width: 85%;
height: 20px;
padding-bottom: 2px;
margin-top: -25px;
transition: margin-top 200ms ease-in;
background: black;
color: white;
opacity: 0.6;
}
.title-text {
float: left;
padding-left: 5px;
}
.slides:hover .title {
margin-top: 0px;
}
Here is link to a fiddle.
原文：https://stackoverflow.com/questions/39281550
2020-01-18 23:42
满意答案
我修复了这部分，但代码本身很笨拙
无论如何还是这里的例子： jsfiddle
首先你忘了“;” 在.nav { height和width之间其次不要使用position: absolute和float它相互排斥尝试连接类似按钮的类似classes
.btn-prev,
.btn-next{
color: black;
background:white;
border: 2px solid white;
margin: 0px 5px 0px 0px;
cursor: pointer;
padding: 0px 5px 0px 5px;
display: inline-block;
}
快速解释一下，我在.nav元素上设置了text-align ，因此按钮将设置在.nav和.btn-*内的右侧，用于display: inline-block; (默认display: block;因此它的行为类似于文本。
I fixed this part but code itself is clumsy
anyway still here is example : jsfiddle
first of all you forgot ";" in .nav { between height and width secondly dont use position: absolute and float it exclude each other try to connect similiar classes like your buttons
.btn-prev,
.btn-next{
color: black;
background:white;
border: 2px solid white;
margin: 0px 5px 0px 0px;
cursor: pointer;
padding: 0px 5px 0px 5px;
display: inline-block;
}
Quick explain, I set text-align on .nav element so buttons would be set on right side inside .nav and .btn-* for display: inline-block; (default display: block; so it would behave similiar like text.
相关问答
我想你忘了链接到jquery库。 您只链接到响应式导航的jquery，但您需要Main jquery库才能工作。 将此链接放在responsive-nav.js的链接之前： i think you forgot to link to the jquery library. You are only linking to the jquery of the responsive nav, but you need the Main jquery library to work. put this b...
Chrome会从您的链接中读取HREF属性，以在状态栏中显示链接。 因此，如果您从A标签中删除HREF，状态栏将不会显示。 但链接也不起作用，:)。 这就是为什么你可以在MouseOver上创建一个事件处理程序来解决这个问题，并保持你的链接工作。 $("body").on('mouseover', 'a', function (e) {
var $link = $(this),
href = $link.attr('href') || $link.data("href");...
对于最后一个按钮，使用android:layout_width="wrap_content"而不是android:layout_width="fill_parent" 即：
android:id="@+id/corner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android...
这里是codepen，告诉我它是否解决了你的问题 把你的
这个CSS导致你的文本在.fallback ul里面.fallback ul .nav-pages li {
float: left;
margin-left: 20px;
}
如果你覆盖这个 .fallback li{
margin-left: 10px;
}
.fallback{
z-index: 10;
}
这应该工作正常。 DEMO This CSS Causes the Left Moving Of your Text inside .fallback u...
.navbar .center {
width: 60%;
margin: 0 auto;
text-align: center;
}
.navbar .right {
position: absolute;
right: 0;
top: 0;
}
请参阅： http ： //plnkr.co/edit/1XLrK4Iuq6CPSYmGPDYn？p = preview .navbar .center {
width: 60%;
m...
我修复了这部分，但代码本身很笨拙 无论如何还是这里的例子： jsfiddle 首先你忘了“;” 在.nav { height和width之间其次不要使用position: absolute和float它相互排斥尝试连接类似按钮的类似classes .btn-prev,
.btn-next{
color: black;
background:white;
border: 2px solid white;
margin: 0px 5px 0px 0px;
cursor: point...
根据我使用保证金的经验，通常可以做到 .logo
{
position:relative;
z-index: 2;
width: 100%;
height:200px;
text-align:right;
margin-right: 0;
margin-left: auto;
margin-bottom: -140px; //Tho i would fine tune this if i were you
//Or if you wish margin: 0px 0px -...
这是我的尝试，试图尽可能地匹配。 这完全是关于内部渐变，阴影和边框的细节。 .container {
width: 350px;
border: 1px solid #CCCCCC;
background: #0d0e0f;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0d0e0f+0,272a2d+51,0d0e0f+100 */
...
在nav类中添加float .nav
{
top:1px;
border-bottom: 3px solid #c893c7;
padding-top:20px;
padding-bottom:16px;
float:right;
}
http://jsfiddle.net/rizwanabbasi/WmGpU/ I don't know if this solution is good, but I just put my nav in additional div and added pad...
相关文章
<table > <tr > <td ><input t
...
以下文档将提供一个合理的风格指导，用于CSS开发。 这个文档并不是规范，我也不希望将自己的风格喜好强加
...
盒子模型解决页面的布局问题 块级标签: 占的是一行. 行内标签: 占行内的一部分. 不能嵌套 块级标
...
CSS的基本语法 选择器 { 属性键:属性值; 属性键:属性值1
...
结合方式01: 在标签上加入style属性. 属性的值就是css代码. 示例： &
...
标签选择器: 语法: 标签名 { 属性键:属性值; }
...
想要实现这个一个Table，table的padding和下面的黑线一直实现不了，求各位大牛指点。
...
上次发表了一篇 微信抽奖转盘活动-效果源码分析 最近想起了刚接到这个项目时第一时间脑海里迸出的解决方法
...
样式表简介和基础,样式表的选择器.avi,盒子模型.avi,定位.avi,实现简单列表和背景图片.av
...
中文名: DIV.CSS应用视频教程 英文名: DIV+CSS 资源格式: 压缩包
...
最新问答
CREATE语句不完整。 您可以通过将其编辑为以下内容来创建该过程。 CREATE VIEW [dbo].[test] AS SELECT 1 'foo' 创建后，您可以继续更改它。 编辑：完全转义它将如下所示： EXEC dbo.sp_executesql @statement = N' CREATE VIEW [dbo].[test1] AS SELECT 1 ''foo'' ' The CREATE statement is incomplete. You can create the
请注意，jQuery启动的“click”事件将触发事件，但不会导致导航。 相反，您可以读取链接的HREF属性并直接设置窗口位置： // The click event: $('a').on("click", function() { console.log("Click event fired"); }) var demo1 = function() { // This will trigger the click event, but will not navigat
List lc = driver.findElements(By.cssSelector("table[id*='filter']")); for (WebElement row : lc) { List images = row.findElements(By.tagName("img")); for (WebElement image : images) { image.click(); } } List
我没有任何问题，但我能够通过启用我的弹出窗口拦截器(我使用更好的弹出窗口阻止程序 - Chrome网上应用店 )来重现你在运行Chrome 21.0.1180.89的Windows 7上遇到的问题。 如果您使用弹出窗口阻止程序，请尝试为jsfiddle /您正在使用的站点禁用它。 I didn't have any issues with it, but I was able to reproduce the problem you were having on Windows 7 runnin
opencv已经有开源的人脸识别的代码了，只需要安装一下，有训练好的关于人脸的xml文件，然后根据这两个xml文件，输入一张带有人脸的图片进行检测就好了。参考网址：http://www.cnblogs.com/mengdd/archive/2012/08/01/2619043.html 这里说的更详细一些。matlab是专门针对图像处理的，不过一般的用matlab实现的，用opencv也都可以做的到。有些时候将matlab代码转为opencv还是需要一定时间和一定功底的
您需要使用ProximitySensor来检测手机屏幕何时被覆盖。 这是一个例子： 在android中使用接近传感器 You need to use ProximitySensor to detect when the phone screen is covered. Here is an example: Using proximity sensor in android
我认为找到这个的最简单方法是搜索ProjectName列。 它似乎包含层次结构信息： select c.* from content c where ProjectName+' ' like '%Project 1 %' 额外的空间是确保Project 1与Project 10不匹配。 I found the way to solve. But the actual solution is given by Jayvee. Sorry I didnt know the method it ca
弄清楚了！ 它被链接到： searchText: 'Search for a member...', 这将自动填充搜索栏的内容，并尝试根据该搜索词找到用户。 删除此属性解决了这个问题。 Figured it out! It was linked to: searchText: 'Search for a member...', This will autofill the search bar with content and will attempt to find the user
错误2245也可能是密码历史记录问题。 新密码是最近使用的密码吗？ 编辑：看起来这个功能在Server 2003 SP 2之后破了。我在使用文档中的示例从C ++调用函数时遇到了同样的错误。 您可能需要使用NetUserSetInfo。 Error 2245 could also be a password history problem. Is the new password one that was used in the recent past? Edit: It looks like
我在网上搜索了很多，为我的问题找到答案。 我花了很多时间，所以我在这里贴出来帮助别人。 为了使GLEW与MinGW一起工作，您应该从GLEW网站下载源代码并放置 来自MinGW \ bin的gcc.exe 来自MinGW32 \ mingw32 \ bin的ar.exe 到GLEWs源文件夹并在该文件夹中创建并运行.bat，如下所示： gcc -DGLEW_NO_GLU -O2 -Wall -W -Iinclude -DGLEW_BUILD -o src/glew.o -c src/glew.