Question

我是新手，非常感谢一些指导。我试图用css将我的图像放在div中。我使用了内联元素，它仍然出现在图像下方。这是我的ui按钮的代码：

   #UIButtons {
position:fixed;
top: 50%;
left: 40%;
width:45em;  /* this is correct and displays how I want it to*/
height:18em;
margin-top: -9em; 
margin-left: -15em;
background: url(backtabss.png);

}
#UIButtons ul{ /* this has set the height ok*/
position:relative;
top: 9%;
right: 50%;
width:45em;
}
#UIButtons li  {/*not sure what this is doing to be honest*/
position:relative;
top: 70%;
left: 45%;
display: inline; /* this is not working my images are appearing vertical*/
padding: 40px;
}

我已经对代码进行了评论，让您知道发生了什么。 HTML是：

<div id="UIButtons"> 
  <ul>
     <li><a href="tutorials.html"><img src="beginBUT.png" alt="Click to start  Tutorials" title=" Click this button to start Tutorials" width="300" height="250"/></a></li>
     <li><a href="sChords.html"><img src="beginCHO.png" alt= "Click to view Chord Sheet" title=" Click this button to view Chord Sheet" width="300" height="250"/></a></li>
 </ul>  
</div>

感谢您的时间。我在这里看过其他建议，但没有人帮助我，事实上它让我更加困惑！

Answer 1

这个css代码应该可以解决这个问题

#UIButtons ul {
    list-style-type:none;
    margin:0;
    padding:0;
}

#UIButtons li  {
    display:inline;
}

如果父容器的大小不足以将两个元素保持在一行上，那么它将把它放在下一行。无论父元素的大小如何，您是否总是希望它们在同一条线上？

http://jsfiddle.net/XS57H/

Answer 2

你应该使用内联块：

#UIButtons li {
position: relative;
top: 70%;
left: 45%;
display: inline-block;
padding: 40px;
}

你需要在这里增加宽度：

#UIButtons ul {
position: relative;
top: 9%;
right: 50%;
width: 52em;
}

Answer 3

你有几个宽度碰撞，有些似乎可以正常工作，但实际上它们相互阻挡。

当你给它们一个边框时，看看这些元素的大小和位置有多奇怪：

http://jsfiddle.net/qaZsh/

现在，我已经删除了CSS的 lot ，结果如下：

  #UIButtons {
       border: 1px solid blue;
position:fixed;
width:55em;  /* this is correct and displays how I want it to*/
background: url(backtabss.png);

}
#UIButtons ul{ /* this has set the height ok*/
       border: 1px solid red;
position:relative;
top: 9%;
}
#UIButtons li  {/*not sure what this is doing to be honest*/
       border: 1px solid green;
display: inline-block; /* this is not working my images are appearing vertical*/
padding: 40px;
}

http://jsfiddle.net/qaZsh/1/

我不确定这是不是你想要的（很难猜），但我认为它更接近。我改变了一件事：将inline更改为inline-block {/ 1}}。

你可能会进一步剥离它。无论如何，有时退一步（甚至重新开始）是件好事。在这种情况下，我认为你只是失去了大量的绝对和相对位置，加上正负边距和填充。在某个时刻，无法保持概览。

需要CSS定位帮助

3 个答案: