Question

我确定之前已经回答过，但我找不到解决方案。这就是我目前拥有的html：

<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });
});
</script>

<style type="text/css"> 

</style>
</head>
<body>
    <div id="flip">
        <p>Click to slide the panel down or up</p>
        <img class="ux" src="/path" alt="complete" height="32" width="32" align="right" />
        <img class="ux" src="/path" alt="add" height="32" width="32" align="right" />
        <img class="ux" src="/path" alt="edit" height="32" width="32" align="right" />
        <img class="ux" src="/path" alt="remove" height="32" width="32" align="right" />
    </div>
    <div id="panel">Hello world!</div>

CSS：

body {
  width: 80%;
  margin: auto;
  margin-top: 30px;
}  

#panel,#flip
{
    padding:5px;
    text-align:center;
    background-color:#e5eecc;
    border:solid 1px #c3c3c3;
}
#panel
{
    padding:50px;
    display:none;
}

当我尝试将它们放在一起时，图像出现在div边框的右下角，然后在调用slideToggle()时进一步改变。我的最终目标是让所有4个图像与段落标记内联。非常感谢任何和所有帮助。

编辑：这里是jfiddle链接：http://jsfiddle.net/4jNp8/

编辑：相同的JSFiddle，但有占位符：http://jsfiddle.net/4jNp8/1/

Answer 1

最简单的方法是将display:inline块添加到p和img标记：

#flip > * {
    display: inline-block;
}

p是一个块级元素，所以除非你float它，inline-block它，或者使用其他一些定位（例如display：table-cell）之后的任何内容不显示内联。

浮动：正确的图像突破了div

1 个答案: