Question

到目前为止我的小提琴： https://jsfiddle.net/dzjqor2d/

无论我尝试什么，我都无法将中间<li>置于中心位置。

我的代码：

＆＃13;

ul {
  width: 60%;
  overflow: auto;
  background-color: #F5FAFF;
  padding: 20px;
}
ul li {
  list-style: none;
  float: left;
  padding: 10px 20px;
  background-color: #388CD1;
  color: #F5FAFF;
  position: relative;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
ul li:last-child {
  float: right;
}

＆＃13;

<ul>
  <li>
    Empty cart
  </li>
  <li>
    Continue shopping
  </li>
  <li>
    Update cart
  </li>
</ul>

＆＃13;

注意：

内容是动态的，容器的宽度也是动态的

Answer 1

根据li的文字对齐方式，首先float向左，最后到右边休息将ul：

ul {
  width: 60%;
  overflow: auto;
  background-color: #F5FAFF;
  padding: 20px;
  text-align: center;
}

ul li {
  list-style: none;
  display:inline-block;
  padding: 10px 20px;
  background-color: #388CD1;
  color: #F5FAFF;
  position:relative;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

ul li:last-child{
  float:right;
}
ul li:first-child{
  float: left;
}

<强> demo

Answer 2

您不应该将最后一个 li 浮动，使用边距来使对齐正确：

java.lang.NumberFormatException: For input string: "c0f1a47ba0c04d89"

https://jsfiddle.net/dzjqor2d/8/

Answer 3

您可以尝试将CSS3 ul选择器与li和<ul> <li> Empty cart </li> <li> Continue shopping </li> <li> Update cart </li> </ul>标记一起使用

<强> HTML

ul {
  width: 60%;
  overflow: auto;
  background-color: #F5FAFF;
  padding: 20px;
  text-align:center;
}

ul li {
  list-style: none;
  display:inline-block;
  padding: 10px 20px;
  background-color: #388CD1;
  color: #F5FAFF;
  position: relative;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
ul li:nth-child(1){
  float:left;
} 
ul li:nth-child(3){
  float:Right;
}

<强> CSS

#include <stdio.h>
#define ssize_t long
#include <gmime/gmime.h>

    int main (int argc, char **argv)
    {
        GMimeStream *stream;

        /* initialize GMime */
        g_mime_init (0);

        /* create a stream around stdout */
        stream = g_mime_stream_file_new (stdout);

        /* 'printf' */
        g_mime_stream_printf (stream, "Hello World!\n");

        /* flush stdout */
        g_mime_stream_flush (stream);

        /* free/close the stream */
        g_object_unref (stream);

        return 0;
    }

Answer 4

这些天flexbox是要走的路，过去浮动很好，但现在不是那么多。

UL我添加了display: flex;和justify-content: space-between;这意味着;使它们都适合一个块，如果有额外的空间，只需在它们之间留出空间。

以下看看：

＆＃13;

body {
  margin: 0;
}
ul {
  display: flex;
  justify-content: space-between;
  width: calc(100% - 40px);
  background-color: #F5FAFF;
  padding: 20px;
}
ul li {
  list-style: none;
  padding: 10px 20px;
  background-color: #388CD1;
  color: #F5FAFF;
  position: relative;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

＆＃13;

<ul>
  <li>
    Empty cart
  </li>
  <li>
    Continue shopping
  </li>
  <li>
    Update cart
  </li>
</ul>

＆＃13;

我已经更改了宽度，以便更容易看到示例。

希望这有帮助。

Answer 5

只需在css下面使用ul：

ul {width：70％; overflow：auto; background-color：＃F5FAFF; padding：20px; display：flex;}

中心只有中间<li>

5 个答案: