Question

我有一个无序的方框列表。我希望所有人都被吸引到窗户的中心而不是他们目前所在窗口的左侧。

我可以使用这个功能吗？我已将我的css和html附在下面作为参考。

＆＃13;

#UL_1 {
  box-sizing: border-box;
  color: rgb(102, 102, 102);
  display: inline-block;
  height: 216px;
  text-align: center;
  text-size-adjust: 100%;
  width: 790px;
  column-rule-color: rgb(102, 102, 102);
  perspective-origin: 395px 108px;
  transform-origin: 395px 108px;
  border: 0px none rgb(225, 225, 225);
  font: normal normal normal normal 15px / 24.75px verbregular;
  margin: 0px;
  outline: rgb(102, 102, 102) none 0px;
  padding: 0px;
}
/*#UL_1*/

#LI_2 {
  box-sizing: border-box;
  color: rgb(25, 25, 25);
  display: block;
  float: left;
  height: 39px;
  text-align: center;
  text-size-adjust: 100%;
  width: 156.656px;
  column-rule-color: rgb(25, 25, 55);
  perspective-origin: 78.3281px 19.5px;
  transform-origin: 78.3281px 19.5px;
  background: rgb(96, 106, 113) none repeat scroll 0% 0% / auto padding-box border-box;
  border-top: 0px none rgb(25, 25, 25);
  border-right: 1px solid rgb(04, 04, 24);
  border-bottom: 0px none rgb(25, 25, 25);
  border-left: 0px none rgb(22, 25, 25);
  border-radius: 5px 0 0 5px;
  font: normal normal normal normal 15px / 24.75px verbregular;
  margin: 2.5px 2.5px;
  outline: rgb(55, 55, 55) none 0px;
  padding: 7.5px 22.5px;
}
/*#LI_2*/

#LI_23 {
  box-sizing: border-box;
  color: rgb(25, 55, 55);
  display: block;
  float: left;
  height: 39px;
  text-align: center;
  text-size-adjust: 100%;
  width: 80.5156px;
  column-rule-color: rgb(25, 55, 55);
  perspective-origin: 40.25px 19.5px;
  transform-origin: 40.25px 19.5px;
  background: rgb(58, 140, 174) none repeat scroll 0% 0% / auto padding-box border-box;
  border-top: 0px none rgb(25, 25, 25);
  border-right: 0px none rgb(25, 55, 55);
  border-bottom: 0px none rgb(25, 25, 25);
  border-left: 0px none rgb(25, 25, 25);
  border-radius: 0 5px 5px 0;
  font: normal normal normal normal 15px / 24.75px verbregular;
  margin: 2.5px 2.5px;
  outline: rgb(255, 255, 255) none 0px;
  padding: 7.5px 22.5px;
}
/*#LI_23*/

＆＃13;

<ul id="UL_1">
  <ul class="center">
    <li id="LI_2">
      a
    </li>
    <li id="LI_3">
      b
    </li>
    <li id="LI_4">
      c
    </li>
    <li id="LI_5">
      d
    </li>
    <li id="LI_6">
      e
    </li>
    <li id="LI_7">
      f
    </li>
    <li id="LI_8">
      . . . .
    </li>
  </ul>

＆＃13;

Answer 1

我认为你想要内联并以页面为中心。如果我认为正确非常简单：

＆＃13;

li {
  width: 50px;
  height: 10px;
  background: red;
  display: inline-block;
}
ul {
  text-align: center;
}

＆＃13;

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

＆＃13;

Answer 2

以下是您需要的输出，请查看演示。

ul {
  text-align: center;
}
li {
  width: 120px;
  height: 50px;
  background: #ff7f27;
  display: inline-block;
  border: 5px solid #000000;
}

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
<ul>
  <li></li>
  <li></li>
</ul>

Answer 3

.center
{
    text-align: center;
    list-style-position: inside;
}

添加此款式....

Answer 4

什么课程<ul class = "center">？

反正

将<ul>....</ul>放在<div style="text-align:center">和</div>

之间

将#UL_1更改为.UL_1，因为它是一个非ID的类。

删除或取消设置UL_1 css

中的宽度

完成！

Answer 5

试试这个：

.center{text-align:center;}
.center li{display:inline-block}

将无序列表框列为中心

5 个答案: