- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我对创建网站真的很陌生,所以我正在尝试制作一个 css 效果,当有人将鼠标悬停在图像上时会出现弹出文本。我想为弹出窗口添加更多图像到一行中。所以我试图制作一个无序列表,但问题是那些图片不在一行中。它们都向左浮动并且在前一个的下方。如果有人可以修复它,那就太好了。以下是源代码:
HTML
<div id="mainsection">
<ul>
<li><div class="boxcontainer">
<img id="margin" class="galleryZoom" src="images/reference/tropicalisland.jpg" width="128px" height="128px" />
<div class="bubbleposition">
<p>Tropical Island</p>
</div>
</div></li>
<li><div class="boxcontainer">
<img id="margin" class="galleryZoom" src="images/reference/gop-logo.png" />
<div class="bubbleposition">
<p>GOP Varieté Theater</p>
</div>
</div></li>
</ul>
CSS
.bubbleposition {
position: relative;
opacity: 0;
color: #FFF;
top: -200px;
left: -1.65%;
width: 250px;
padding: 10px;
border-radius: 25px;
-webkit-border-radius: 25px;
background-color: rgba(0,0,30,0.5);
-webkit-box-shadow: 0px 0px 15px 2px rgba(255,255,255,.75);
box-shadow: 0px 0px 15px 2px rgba(255,255,255, .75);
-webkit-transition: .5s; transition: .5s;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.boxcontainer .bubbleposition:after {
position: relative;
top: 0%;
left: 10%;
height: 0;
width: 0;
border: 6px solid transparent;
border-top: 6px solid rgba(0, 0, 30, 0.5);
white-space: nowrap;
color:#DDD;
}
.boxcontainer:hover .bubbleposition {
opacity: 1;
top: -270px;
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
/* Here is the problem | Should make list of pictures in a line */
#mainsection ul li .boxcontainer {
display:inline;
}
最佳答案
您遇到的一个问题是您试图对齐 <li>
的内容标签。在这种情况下,您所做的只是将已经不对齐的东西放在 中。你真正想要做的是对齐 <li>
标签自己。 display: inline;
也有点反直觉的功能,你实际上想要display: inline-block;
#mainsection ul li {
display: inline-block;
}
JSFiddle here (确保 window 足够宽,让他们可以挨着坐)
更好的是,我更愿意使用 floats在这种情况下。
#mainsection ul li {
float: left;
}
关于css - 图像的弹出文本。图片不在一条线上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33712096/
如何迭代(一行)分割函数给我的每个类? 我试过这个: 编辑(抱歉) $("p").attr("class").split(' ').each (function (i,n){alert(n)}
我有一条垂直线和一条水平线,当我动态调整我的 Canvas 父级时,我想调整它们的大小。 (地标) 我希望水平线始终距 Canvas 的左右边界 25 处,距底部边界 13 处。 垂直线也是如此,距上
我有一个 y 变量,我试图在图形的顶部和底部针对两个相关的 x 轴绘制它(例如 y="立方体中的事物数",x1="立方体的边长", x2="立方体的体积")。我在 numpy 数组中有 y、x1、x2
我想画一条简单的水平线,并在这条线 flex 的地方制作动画。我有这个动画的视频。你能给我一些建议如何开始以及我必须使用哪个 js/css 吗? 都是关于矩形底部的线: http://www.stop
我是一名优秀的程序员,十分优秀!