Question

好吧，我有一个网站，它正在发生一些我无法解决的问题。我有这样的代码：

aside {
   font-size: 150%;
   font-family: fantasy;
   font-variant: small-caps;
   line-height: 2em;
   background: rgba(187,219,136,0.75);
   width: 90%;
   height: 50px;
   text-align: center;
}

aside {
   margin: auto;
   margin-top: 20px;
}

aside li {
   float: left;
   padding: 0 2%;
   font-size: 100%;
}

<aside>
      <ul>
        <li id="matematica"><a href="matematica.html" title="Ver resumos de Matemática">Matemática</a></li>
        <li><a href="geografia.html" title="Ver resumos de Geografia">Geografia</a></li>
        <li><a href="fisica.html" title="Ver resumos de Física">Física</a></li>
        <li><a href="historia.html" title="Ver resumos de História">História</a></li>
        <li><a href="portugues.html" title="Ver resumos de Português">Português</a></li>
        <li id="quimica"><a href="quimica.html" title="Ver resumos de Química">Química</a></li>
      </ul>
</aside>

所以，问题是我想将ul元素集中在ul中，我不能使用 text align 因为li不是文本！任何人都可以帮助我吗？

Answer 1

尝试：

aside li{
 display:inline-block;
 padding: 0 2%;
 font-size: 100%;
}

删除浮动;

Answer 2

这就是你想要的吗？

＆＃13;

aside {
      font-size: 150%;
      font-family: fantasy;
      font-variant: small-caps;
      line-height: 2em;
    	background: rgba(187,219,136,0.75);
    	width: 90%;
    	height: 100px;
    	text-align: center;
    }
    aside{
      margin: auto;
      margin-top: 20px;
    }
    aside li{
      display: inline-block;
      padding: 0 2%;
      font-size: 100%;
    }

＆＃13;

<aside>
      <ul>
        <li id="matematica"><a href="matematica.html" title="Ver resumos de Matemática">Matemática</a></li>
        <li><a href="geografia.html" title="Ver resumos de Geografia">Geografia</a></li>
        <li><a href="fisica.html" title="Ver resumos de Física">Física</a></li>
        <li><a href="historia.html" title="Ver resumos de História">História</a></li>
        <li><a href="portugues.html" title="Ver resumos de Português">Português</a></li>
        <li id="quimica"><a href="quimica.html" title="Ver resumos de Química">Química</a></li>
      </ul>
    </aside>

＆＃13;

Answer 3

如果我理解了你想要达到的目标，你可以尝试改变：

aside li{
  float: left;
  padding: 0 2%;
  font-size: 100%;
}

到

aside li{
  display: inline;
  padding: 0 2%;
  font-size: 100%;
}

在JSFiddle上查看，并检查<ul>标记的属性list-style-type。

Answer 4

我认为你不能选择那个圈子，因为它不是一个元素。你可以自己看看。只是去检查并尝试找到该元素。但您可以制作自定义列表。

<center><div id="b">
 <div class="a"><span></span> List 1</div>
 <div class="a"><span></span> List 2</div>
 <div class="a"><span></span> List 3</div>
</div></center>
<style>
span {
 background:black;
 height:10px;
 width:10px;
 border-radius:30px;
 display:inline-block;}
</style>

如何将元素集中在<ul>中？

4 个答案: