Html 在内部创建两个元素<；ul>；标记在同一行上

我想知道如何使标签内的2个div响应，但同时元素必须保持在同一条线上。现在右边的div低于第一个div。下面是我的JSFIDLE示例：

代码：

<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>

---

也许不要使用

float

和

position

而是尝试使用

display:inline

或

display:inline block

，您已经接近了。您只需将此CSS添加到您的li中即可：

width:50%;
margin:0;

这些值可以调整。基本上，我们告诉CSS让元素为ul宽度的50%。如果将其设置为大于此值，则它们将换行。或者，您可以将一个设置为40%，另一个设置为60%，这两个值只需添加到100%（如果添加了填充、边距或边框，则添加到100%或更小）

---

什么是“反应灵敏但在同一条线上”呢？我不明白你想发生什么。如果li元素的大小不同，例如第一个元素的宽度为134px，第二个元素的宽度为93px，该怎么办？@johnsinger将它们转换为百分比。93/（93+134）=41%134/（93+134）=59%响应性设计要求百分比。

width:50%;
margin:0;