Question

我有一个ul有两个li，第一个是描述元素，第二个是“关闭”元素（有一个简单的X ico用于关闭）：

<div class="video-button-list top">  
    <ul>
        <li id="video-file-title">FileName</li>
        <li id="video-close-button">X</li>
    </ul>  
</div>

我的目标是让第一个li位于包含div的中心，第二个浮在右边，以便它显示在页面的右上角（这对你来说意味着什么是浮动的正好在div）。

.video-button-list.top ul,
.video-button-list.top ul li {
    position: relative;
    float: left;
}

 .video-button-list.top ul {
     left: 50%;
 }

.video-button-list.top ul li {
    line-height: 55px;
    right: 50%;
}

#video-close-button {
    float: right;
}

列表本身是display: inline-block。我有三个相关的问题：

我的HTML
如果是这样，我需要做出哪些改变才能达到理想的造型效果？
如果没有，推荐的结构和相关样式是什么？

Answer 1

是的，这是可能的。
您不必将ul定位为相对或向左浮动，只需向右浮动第二项。

我是这样做的（左边的边缘很少）：

HTML：

 <body>
      <div class="wrapper">
      <ul>
        <li class="list-item item1">ITEM 1</li>
        <li class="list-item item2">ITEM 2</li>
      </ul>
      </div>
    </body>

CSS：

.wrapper{
  width: 100%;
  border: 1px solid black;
  height: 200px;
}

li{
  display: inline-block;
}

.item1{
  margin-left: 40%;
}

.item2{
  float: right;
}

Answer 2

我可能会使用文字对齐，它不依赖于近似边距，以及关闭按钮的绝对定位：

＆＃13;

.video-button-list.top ul,
.video-button-list.top ul li {
    position: relative;
    text-align: center;
}

.video-button-list.top ul li {
    line-height: 55px;
    list-style: none;
}
.video-button-list.top ul li:last-child {
    position: absolute;
    top: 5px;
    right: 5px;
}

＆＃13;

<div class="video-button-list top">
    <ul>
        <li id="video-file-title">FileName</li>
        <li id="video-close-button">X</li>
    </ul>
</div>

＆＃13;

Answer 3

使用position来实现这是一种正确的方法和场景：

.video-button-list.top ul,
.video-button-list.top ul li {
  position: relative;
  text-align: center;
  display: block;
}
.video-button-list.top ul li {
  line-height: 55px;
  list-style: none;
}
.video-button-list.top ul li#video-close-button {
  position: absolute;
  top: 50%;
  right: 5px;
  margin-top: -1em;
  line-height: 1;
}

<div class="video-button-list top">
  <ul>
    <li id="video-file-title">FileName</li>
    <li id="video-close-button">&times;</li>
  </ul>
</div>

Answer 4

我建议使用flexbox。

.video-button-list {
  display: flex;
  justify-content: center;
}
.video-button-list ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}
#video-close-button {
  margin-left: 20px;
}

<div class="video-button-list top">
  <ul>
    <li id="video-file-title">FileName</li>
    <li id="video-close-button">X</li>
  </ul>
</div>

两个li元素左边一个，另一个右边

4 个答案: