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.

最新问答

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.

html怎么移动按钮位置,CSS Nav按钮向左下方移动(CSS Nav buttons move bottom left)相关推荐

java按钮位置_java窗口按钮位置设置
java窗口按钮位置设置代码如下: package Day08; import java.awt.BorderLayout; import javax.swing.JButton; import j ...
html设置按钮坐标,CSS：如何在html表右侧设置按钮位置
我有一个html表,其列通过Ajax调用和Jquery动态生成.因此表格的宽度不固定.CSS:如何在html表右侧设置按钮位置我想要在表的顶部和底部有按钮,只有右对齐到表宽度. 如果我只做了一个fl ...
26.纯 CSS创作按钮被从纸上掀起的立体效果
26.纯 CSS创作按钮被从纸上掀起的立体效果原文地址:https://segmentfault.com/a/1190000014930183 感想:主要2D和3D转换.阴影效果. HTML代码: ...
css sprite 按钮,CSS Sprites (CSS 精灵) 技术
CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢 ...
html给按钮加颜色代码,css按钮属性 html中按钮的字体颜色怎么设置?
css 属性设置input 中type为button 的属性 css中什么属性可以控制按钮的形状 1.dispaly 适用于css1和css2,用于设置目标对象是否及如何显示.该属性的常用值为none ...
向下钻取按钮位置设置
2019独角兽企业重金招聘Python工程师标准>>> <!DOCTYPE html> <html> <head> < ...
【MFC】可调整按钮位置的工具栏
00. 目录文章目录 00. 目录 01. 案例概述 02. 开发环境 03. 关键技术 04. 程序设计 05. 秘笈心法 06. 源码下载 07. 附录 01. 案例概述本实例实现了工具栏上两 ...
css使按钮固定在界面上面
css使按钮固定在界面上面 <div><div style="border-bottom: 1px solid #e7e7e7"><a class=& ...
css button 四种状态,css中按钮的四种状态
css中按钮有四种状态普通状态 hover 鼠标悬停状态 active 点击状态 focus 取得焦点状态 .btn:focus{outline:0;} 可以去除按钮或a标签点击后的蓝色边框下面的 ...

html怎么移动按钮位置,CSS Nav按钮向左下方移动(CSS Nav buttons move bottom left)

html怎么移动按钮位置,CSS Nav按钮向左下方移动(CSS Nav buttons move bottom left)相关推荐

最新文章

热门文章