0

我正在尝试在一行中设置 3 个元素 、 和 。左右图像已设置大小，中间应该填满剩下的 100%。然而，由于某种原因，虽然第一个 img 和 div 设置正确，但最后一个 img 流向下一行。另外，萤火虫说中间实际上是看不见的？并且宽度为 0px，即使我可以看到里面就好了

<div>
    <div class="testowyDiv">
        <img src="ikony/strzalkal.png" class="carousel-button-left"/>
        <div class="testowyDiv2">
        <ul class="testowyUl">
            <li><img src="zdjecia/r_hale/1/1.jpg" /></li>
            <li><img src="zdjecia/r_hale/1/2.jpg" /></li>
            <li><img src="zdjecia/r_hale/1/3.jpg" /></li>
        </ul>
        </div>
        <img src="ikony/strzalkap.png"  class="carousel-button-right"/>
    </div>
</div>

风格：

.testowyDiv{
width: 564px;
height: 128px;
margin-top:15px;
margin-bottom:15px;
padding-left:53px;
padding-right:53px;
overflow: hidden;
float:left;
}

.testowyUl{
float:left;
padding:0px;
padding-right:5px;
display:inline;
width:1000px;
margin-bottom:0px;
margin-top:0px;
}

.testowyDiv2{
width:100%;
overflow:hidden;
display:inline;
}

.testowyUl li{
display:inline;
padding-left:5px !important;
padding-right:5px;
}

.carousel-button-left{
display:inline;
float:left;
width:53px;
margin-left:-53px;
}
.carousel-button-right{
display:inline;
float:right;
width:23px;
margin-right:-55px; 
float:left;
}
4

1 回答 1

1

你过度使用display: inline和浮动。

这里有一些简单的 css 利用position: absolute（应该谨慎使用的东西）来设置左右按钮。然后中心 div 可以自由地做它需要的事情。

我已将容器 div 着色为蓝色，将中心 div 着色为绿色，以便您可以看到它们所在的位置。

HTML

<div class="container">
    <img src="http://www.buildgp.com/images/arrow_prev.png" class="carousel-button-left" />
    <div class="centreContainer">
        <ul>
            <li>
                <img src="zdjecia/r_hale/1/1.jpg" />
            </li>
            <li>
                <img src="zdjecia/r_hale/1/2.jpg" />
            </li>
            <li>
                <img src="zdjecia/r_hale/1/3.jpg" />
            </li>
        </ul>
    </div>
    <img src="http://www.buildgp.com/images/arrow_next.png" class="carousel-button-right" alt="right" />
</div>

CSS

.container {
    width: 564px;
    height: 128px;
    padding: 0 53px;
    background: #ccccff; /* blue */
    position: relative;
}
.centreContainer {
    background: #ccffcc; /* green */
    height: 100%;
}
.centreContainer > ul {
    padding:0px;
    margin:0px;
}
.centreContainer > ul > li {
    display: inline;
    padding-left: 5px !important;
    padding-right: 5px;
}
.carousel-button-left {
    position: absolute;
    left: 0;
    top: 30px;
    width: 53px;
}
.carousel-button-right {
    position: absolute;
    right: 0;
    top: 30px;
    width: 53px;
}

演示

于 2013-08-26T01:57:59.630 回答