Question

我做了一个ul＆gt;李的职位空缺，但点/子弹表现得非常奇怪。我觉得我的代码中有些东西是这样做的，或者我忽略了一些东西。任何帮助是极大的赞赏。页面的CSS代码：

.vacatures{
        width: 80%;
        margin: 0 auto; 
        text-align: center;

        h2{
            font-size: 36px;
            color: #0066ff;
        }

        h3{
            font-size: 32px;
            color: #0066ff;
            padding-bottom: 10px;
        }

        ul{
            padding-bottom: 15px;
        }

        li{
            padding-top: 10px;
        }

        a{
            text-decoration: none;
            color: inherit;
            display: block;
            margin-top: 5px;
            margin-bottom: 20px;
        }

        p{
            font-size: 18px;
            font-weight: normal;
        }
    }

HTML：

<div class="vacatures">
</div>
<div>
  <h3>Functie omschrijving :</h3>
  <ul>
    <li>omschrijving 1</li>
    <li>omschrijving 2</li>
    <li>omschrijving 3</li>
    <li>omschrijving 4</li>
  </ul>
</div>
<div>
  <div>Vacature pdf</div>
  <div>
    <span class="file file--mime-application-pdf file--application-pdf"><a href="http://localhost/mlndemo/sites/default/files/2017-02/voorbeeld_sollicitatiebrief_0.pdf" type="application/pdf; length=420819">voorbeeld_sollicitatiebrief.pdf</a></span>
  </div>
</div>
<div id="block-tweedevacature">

  <div>
    <h3>Functie omschrijving :</h3>
    <ul>
      <li>omschrijving 1</li>
      <li>omschrijving 2</li>
      <li>omschrijving 3</li>
      <li>omschrijving 4</li>
    </ul>
  </div>
  <div>
    <div>Vacature pdf</div>
    <div>
      <span class="file file--mime-application-pdf file--application-pdf"><a href="http://localhost/mlndemo/sites/default/files/2017-02/voorbeeld_sollicitatiebrief_1.pdf" type="application/pdf; length=420819">voorbeeld_sollicitatiebrief.pdf</a></span>
    </div>
  </div>
</div>

图像便于可视化意图：

Answer 1

在<ul>上设置宽度并将其居中，将会修复它。这样，您就可以将整个列表居中。我猜它里面的文字也应该左对齐。

ul {
   width: 50%;
   margin: 0 auto;
   text-align: left;
}

Answer 2

你的html顶部有

>which python

/cygdrive/c/Users/user/AppData/Local/Programs/Python/Python35/python

没有将该类应用于除空<div class="vacatures"> </div>之外的任何其他内容，因此CSS中所有关于类div的内容实际上并不适用于该类"vacatures"。

第二组<ul>有div实际上围绕着它们，但这是一个不同的类"block-tweedevacature"，我们看不到它。

<li>中的点未正确对齐

2 个答案: