Question

我真的很想创建网站，所以我正在尝试制作一个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;
}

Answer 1

您遇到的一个问题是，您尝试对齐'\0'代码的内容。在这种情况下你所做的就是将中的东西与中已经不一致的东西对齐。您真正想要做的是对齐<li>标签本身。 <li>类似的函数也是反直觉的，你实际上想要display: inline;

display: inline-block;

JSFiddle here（确保窗口宽度足以让它们彼此相邻）

更好的是，我更倾向于在这种情况下使用floats。

#mainsection ul li {
    display: inline-block;
}

JSFiddle here

Answer 2

您的意思是单行中的所有图片吗？如果是大小写调用显示：内联<li>而不是.boxcontainer

#mainsection ul li {
   display:inline;
}

或只是致电

#mainsection ul li {
   float: left;
}

希望有所帮助

Answer 3

您希望SELECT worker.*,store.Name AS store,job.Name AS job from worker inner join store on worker.Store_idStore = store.idStore and worker inner join job on worker.job_idJob = job.idJob内联，无法制作图片。

li

用于图像的弹出文本。图像不在一条线上

3 个答案: