Javascript 如何放置<；ul>；css中的环绕图像

因此，正如标题所说，我想在图像周围放置

。

ul

得到了4个

，我想在图像的左侧放置2个
，在右侧放置2个
：

<ONE>-----<TWO>-----(imageLOGO.png)-----<THREE>-----<FOUR>

和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;
}

如果需要，我会提供更多信息。提前感谢您的时间。
在一和二之后添加图像。和.列表菜单li float:左；显示：块
 这里有一种方法

通过使用绝对定位将徽标放置在链接面板上，您的想法是正确的

我为
li
元素指定了一个宽度，然后在父
ul
上应用
text align:center
以保持居中

为了给logo留出空间，我使用
nth child
选择器在第二个和第三个
li
元素之间添加了一个200px的右边距

您可以调整各种图元上的边距，以控制
li
图元之间和上方的间距

注意，对于较小的屏幕，您可能需要使用媒体查询和调整页边距等


正文{
保证金：0；
}
#顶{
边框：1px点黑色；
位置：绝对位置；
顶部：0px；
左：0；
右：0；
文本对齐：居中；
}
#顶img{
垂直对齐：顶部；
宽度：150px；
高度：150像素；
}
#顶部图像：悬停{
宽度：158px；
高度：158px；
过渡：所有0.3秒缓解；
}
#线{
位置：绝对位置；
顶部：0px；
宽度：100%；
高度：75px；
背景：#423BD9；
}
.行菜单{
宽度：100%；
身高：100%；
保证金：0；
填充：0；
}
.线路菜单ul{
显示：块；
文本对齐：居中；
利润率：20px0；
填充：0；
}
.行菜单李{
显示：内联块；
利润率：0.20px；
宽度：100px；
边框：1px实心#中交；
}
.行菜单li:n子项（2）{
右边距：200px；
}


一个
两个
三
四

HTML标记是否可以修改，或者是否由其他要求预先确定？非常感谢您的建议。效果不错。我不知道这个
第n个孩子
选择器，但我对网络开发还是相当陌生，所以我每天都学到一些新东西。
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;
}