所以，正如标题所说，我想把<ul>围绕一个图像。 ul得到 4 <li> ，我想放 2 <li>在图像的左侧，以及 2 <li>在右侧:
<ONE>-----<TWO>-----(imageLOGO.png)-----<THREE>-----<FOUR>
这是目前的样子:
如您所见，4 <li>位于网站的左上角。它们被放在相同的蓝线上 <div> - #line .我尝试使用填充，但它看起来真的很糟糕，而且一旦页面最小化或以任何方式调整大小都很难控制。
这是 html 文件:
<body>
<div id="line">
<div class="line-menu">
<ul class="menu-buttons">
<li>ONE</li>
<li>TWO</li>
<li>TREE</li>
<li>FOUR</li>
</ul>
</div>
</div>
<div id="top">
<div id="logo">
<img src="images/chelsea-logo.png">
</div>
</div>
</body>
和 css 文件:
body {
background: url('../images/background.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin: 0;
}
#top{
width: 150px;
margin: 0 auto;
height: 150px;
z-index: 1;
}
#top img {
position: absolute;
width: 150px;
height: 150px;
z-index: 1;
}
#top img:hover {
width: 158px;
height: 158px;
transition: all 0.3s ease;
}
#line {
position: absolute;
top: 0px;
width: 100%;
height: 75px;
background: #423BD9;
}
.line-menu {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.line-menu ul {
display: inline-block;
padding: 5px;
margin: 25px;
}
.line-menu li {
padding: 0 89px;
display: inline-block;
}
如果需要，我会提供更多信息。提前感谢您的宝贵时间。
最佳答案
这是一种方法。
通过使用绝对定位将 Logo 放置在链接面板上，您的想法是正确的。
我为 li 元素指定了一个宽度，然后在父级 ul 上应用了 text-align: center 以保持居中。
为了给 Logo 留出空间，我使用 nth-child 选择器在第二个和第三个 li 元素之间添加了 200 像素的右边距。
您可以调整各种元素的边距，以控制 li 元素之间和上方的间距。
请注意，对于较小的屏幕a，您可能需要使用媒体查询并调整边距等。
body {
margin: 0;
}
#top {
border: 1px dotted black;
position: absolute;
top: 0px;
left: 0;
right: 0;
text-align: center;
}
#top img {
vertical-align: top;
width: 150px;
height: 150px;
}
#top img:hover {
width: 158px;
height: 158px;
transition: all 0.3s ease;
}
#line {
position: absolute;
top: 0px;
width: 100%;
height: 75px;
background: #423BD9;
}
.line-menu {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.line-menu ul {
display: block;
text-align: center;
margin: 20px 0 0 0;
padding: 0;
}
.line-menu li {
display: inline-block;
margin: 0 20px;
width: 100px;
border: 1px solid #CCCCCC;
}
.line-menu li:nth-child(2) {
margin-right: 200px;
}<div id="line">
<div class="line-menu">
<ul class="menu-buttons">
<li>ONE</li>
<li>TWO</li>
<li>THREE</li>
<li>FOUR</li>
</ul>
</div>
</div>
<div id="top">
<div id="logo">
<img src="http://placehold.it/150x150">
</div>
</div>关于javascript - 如何在 css 中将 <ul> 放在图像周围，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37426455/