Question

我有this site一个文本块下面的项目列表，但我不能让它排列在文本块下面的列表中，然后将DIV #contact放在列表下面。我不确定我的HTML是否形成得很差，或者我的CSS中缺少某些内容。

这是相关的CSS（我认为）：

#johnfrye ul li {
    font-size: 1.4em;
    font-family:Arial, Helvetica, sans-serif;
    line-height: 1.45em;
    padding-top:50px;
    padding-left:5px;
    list-style:inside;
    list-style-position:inside;
    list-style-type:disc;
    margin-left:40px;
}

#contact {
    position:absolute;
    right:auto;
    left:auto;
    margin-left:30%;
    margin-right:30%;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight:normal;
    font-size:1.25em;
    padding:5px;
}

Answer 1

你的HTML和CSS有很多错误。

要修复您的特定问题，请更改您的CSS，添加以下内容：

ul.listofstuff {
    width: 120px;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

将您的HTML部分更改为：

<ul class="listofstuff">
    <li>Anal and rectal bleeding</li>
    <li>Investigation of abdominal pain </li>
    <li> Colorectal cancer and polyps</li>
    <li>Inflammatory bowel disease</li>
    <li>Haemorrhoids, fistula and fissure</li>
    <li> Pelvic floor disorders </li>
    <li>Diverticular disease</li>
    <li>Pilonidal isease </li>
    <li>Biliary pain and cholecystitis </li>
    <li>Hernia – inguinal and incisional</li>
</ul>

我会给你一个提示，帮助你上路。不要依赖浮动和位置来格式化您的网页，这些网站有正确的用途，但不是您尝试使用它们的方式。

Answer 2

我将您的UL样式更改为以下内容，我同意samyoul - 为UL提供课程和样式（如果您使用另一个您希望以不同方式设置样式的UL）。

ul {
    list-style: none outside none;
    margin: auto auto 5em;
    text-align: center;
    width: 120px;
}

麻烦排队有序列表

2 个答案: