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

最新推荐文章于 2023-03-29 17:16:31 发布

李小编

最新推荐文章于 2023-03-29 17:16:31 发布

阅读量2.7k

点赞数

文章标签： html怎么移动按钮位置

博客内容讨论了在网页设计中遇到的一个问题，即CSS导航按钮在切换图像时位置出现异常，特别是在点击上一个图像时。作者指出，问题出在使用了`position:absolute`和`float`属性，建议改为使用类别的组合，并提供了修复代码示例。解决方案包括调整按钮的样式，如设置`text-align`和`display:inline-block`等。

摘要由CSDN通过智能技术生成

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.