Question

我想知道如何在标签响应中制作2个div，但同时元素必须保持在同一条线上。现在正确的div低于第一个。这是我的JSfiddle示例：

代码：

<div id="design01">
<div id="titledesign01">Title</div>
                <ul>
                <li>
                <div id="designphoto01"><img src="http://www.emocool.com/work/01.jpg" ></div>
                </li>
                <li>
                <div id="designphoto04"><img src="http://www.emocool.com/work/03.jpg" ></div>
                </li>                
                </ul></div>

CSS：

   #design01 {
  display: block;
  position: relative;
  max-width: 100%;
  margin: 0 auto;
  float:left;   
}
#design01 ul {
    float:left;
    overflow:hidden;
    max-width: 100%;
    height:100%;
    list-style:none;
    padding:0px;
    padding:0px;    
}
#design01 ul li{
    float:left;
    position:relative;
    padding:0px;
}
#titledesign01 { 
    max-width: 100%;
    font: 18px/20px "HelvBold", Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    color:#fff;
    margin-left:20px;       
}
#designphoto04 {
    display: block;
    max-width: 100%;

}
#designphoto04 img{

    max-width: 100%    

}

#designphoto01 {

    display: block;
    max-width: 100%;

}

#designphoto01 img{

    max-width: 100%



}

Answer 1

也许不是使用float和position而是尝试使用display: inline或display: inline-block。

Answer 2

你很亲密。您只需将此CSS添加到您的li中即可使其正常工作：

width:50%;
margin:0;

可以调整这些值。基本上，我们告诉CSS让元素为ul宽度的50％。如果你把它设置得更多，它们会换行。或者，您可以将1设置为40％，将另一个设置为60％，这两个值只需添加到100％（如果添加填充，边距或边框，则可以更少）。

<强> Fiddle

使<ul>标签内的两个元素在同一行上响应</ul>

2 个答案: