Question

我希望所有项目都整齐排列，而不是全部居中。例如，在第一张图像中，它们都是整齐排列的，但不是在div的中心。当你将它们居中时，它们就像第二个图像。我希望他们看第一张图片，但以div为中心

.aboutMe{
    font-size: 1.3em;
    background-color: white;
    border-radius: 10px;
    width: auto;
    height: auto;
    margin: 30px 10px;
    padding: 0px;
    list-style-position: inside;

}
.aboutMe ul{
    width: 70%;
    margin: 0 auto;
    padding: 0px;
    background-color: #00CED1;
    text-align: center;
}
.aboutMe ul li{
    margin: 0 auto;
    background-color: red;

}
.aboutMe ul li ul{
    margin: 0 auto;
    font-size:  0.7em;
}
<div class="aboutMe">
<ul>
    <li id="name">Name: Matt Muniz-Silva</li>
    <li id="age">Age: 23</li>
    <li id="skills">Programming Skills:
        <ul>
            <li>XHTML</li>
            <li>javascript</li>
            <li>CSS</li>
            <li>jquery</li>
            <li>Bootstrap</li>
            <li>PHP</li>
            <li>Mysql</li>
            <li>Swift</li>
        </ul>
    </li>
</ul>
</div>

Answer 1

我给你的父母UL一个id为“center”和text-align：center在你的风格中..它有效。

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Event",
  "name": "SubEvent",
  "startDate": "2016-04-21T12:00",
  "location": {
    ...
  }
  superEvent {
    "@id": "http://event.com/#mainEvent"
  }
}
</script>

CSS

    <div class="aboutMe">
<ul id="center">
    <li id="name">Name: Matt Muniz-Silva</li>
    <li id="age">Age: 23</li>
    <li id="skills">Programming Skills:
        <ul>
            <li>XHTML</li>
            <li>javascript</li>
            <li>CSS</li>
            <li>jquery</li>
            <li>Bootstrap</li>
            <li>PHP</li>
            <li>Mysql</li>
            <li>Swift</li>
        </ul>
    </li>
</ul>
</div>

希望有所帮助

Answer 2

认为这应该适用于你。我不得不改变一些事情。

.aboutMe ul{
width: 70%;
background-color: red; 
}
.aboutMe ul li{   
background-color: red;
margin-left: 33%;
}
.aboutMe ul li ul{
margin-left: -7em;
font-size:  0.7em;
}

Answer 3

这里你去......这是一个复杂的方式，但它认为这是无法预料的结果。

＆＃13;

* {
  margin: 0;
  padding: 0;
}
ul {
  padding: 0;
}
.aboutMe {
  font-size: 1.3em;
  background-color: white;
  border-radius: 10px;
  width: auto;
  height: auto;
  margin: 30px 10px;
  padding: 0px;
  list-style-position: inside;
}
.aboutMe > ul {
  width: 70%;
  margin: 0 auto;
  padding: 0px;
  background-color: #00CED1;
}
.aboutMe ul li {
  background-color: red;
}
.aboutMe li#skills ul {
  font-size: 0.7em;
  display: inline-block;
  margin-left: 50%;
  transform: translateX(-50%);
}

＆＃13;

<div class="aboutMe">
  <ul>
    <li id="name">Name: Matt Muniz-Silva</li>
    <li id="age">Age: 23</li>
    <li id="skills">Programming Skills:
      <ul>
        <li>XHTML</li>
        <li>javascript</li>
        <li>CSS</li>
        <li>jquery</li>
        <li>Bootstrap</li>
        <li>PHP</li>
        <li>Mysql</li>
        <li>Swift</li>
      </ul>
    </li>
  </ul>
</div>

＆＃13;

div中的中心列表项

3 个答案: