需要CSS定位帮助

我对此很陌生，非常感谢一些指导。我想用css将我的图像放在div中。我已经使用了内联元素，它仍然出现在图像下面。这里是我的代码为我的用户界面按钮：需要CSS定位帮助

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

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

来源

2014-03-25 user3460996

您需要填写的详细信息..至少框架问题发布之前..它不能创建一个jfiddle – Andy897

真的令人困惑的问题不知道你想要什么吗？ –

考虑倾向于使用像[Twitter Bootstrap]（http://getbootstrap.com/getting-started/）这样的良好文档的CSS框架，并保持它非常简单。像这样的框架的好处是，你不需要知道或写入CSS。请按照他们在文档中提供的示例进行操作。以下是一些[Bootstrap示例]（http://getbootstrap.com/getting-started/#examples）来帮助您入门。 –

你有一对夫妇的碰撞宽度，以及一些似乎做工精细，但实际上他们阻止对方。

看怎么怪异的尺寸和这些元素的位置，当你给他们一个边界：

http://jsfiddle.net/qaZsh/

现在，我已经删除CSS的很多，结果是这样的：

#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,li。

你甚至可以将其剥离得更远。无论如何，有时退后一步（甚至重新开始）是很好的。在这种情况下，我认为你只是在大量绝对和相对的位置上迷路，加上积极和消极的利润和填充。在某个时候，不可能保持概述。

来源

2014-03-25 18:06:20 GolezTrol

非常感谢你的关键是边界。现在我可以看到哪个css控制了哪个元素。非常感谢你的帮助。现在，将来如果我陷入困境，我会添加边界以查看正在发生的事情。我真的建议新用户也这样做，一旦你看到定位，你可以轻松调整定位，以满足您的要求！ – user3460996

你应该使用inline-block的

：

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

，你需要达到的宽度在这里：

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

来源

2014-03-25 18:04:23 vimes1984

这个CSS代码应该做的伎俩

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

#UIButtons li { 
    display:inline; 
}

如果父容器不足以将两个元素都保留在一行上，那么它将把它放在下一行。不管父元素的大小，你总是希望它们在同一行上吗？

http://jsfiddle.net/XS57H/

来源

2014-03-25 18:06:03

需要CSS定位帮助

回答

相关问题