Question

所以，正如标题所说，我想将<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;
}

如果需要，我会提供更多信息。提前感谢您的时间。

Answer 1

这是一种方法。

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

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

为了打开徽标的空间，我使用li选择器在第2个和第3个nth-child元素之间添加了200px的右边距。

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

在一和二之后添加图像。和.list-menu li float：left;显示：块;

如何在css中将<ul>放在图像周围

2 个答案: