Question

我在编码方面很陌生并且我已经开始制作一些无序列表，但似乎从第3 ul开始它们一直向左而不是向左浮动。我的代码出了什么问题？

这是HTML文件：

<!DOCTYPE HTML>
<html lang="en-US">

<head>
    <link type="text/css" rel="stylesheet" href="main.css"/>
    <title>resume</title>
</head>

<body>

                <p id="name"> my name </p>

        <a href="mailto:myemailaddress@gmail.com"><p id="email">myemailaddress@gmail.com</p></a>

        <div class="left"></div>

        <div class="right">

        <header>
        <h4>Objective</h4>
        </header>

        <p>Some words here.</p>

        <h4>objectives</h4>

        <ul>
            <li> some content here some content here</li>
            <li> some content here some content here</li>
        </ul>

        <ul>
            <li> some content here some content here</li>
            <li> some content here some content here </li>
        <ul>
        <br/>

        <ul>
            <li>some content here some content here</li>
            <li>some content here some content here</li>
        <ul>
        </br>

        <ul>
            <li>some content here some content here</li>
            <li>some content here some content here</li>
        <ul>
        </br>

    </div>
</body>

</html>

CSS文件：

.left {
float: left;
margin-top: 50px;
width: 10%;
height: 1000px;
background-color: #B9D7D9;
margin-bottom: 10px;
}


.right {
float: left;
margin-top: 50px;
width: 88%;
height: 1000px;
background-color: #F4EBC3;
margin-bottom: 10px;
padding-left: 10px;
}

截图：

Answer 1

首先，我们必须正确构建HTML。

您最初拥有的不是一个列表，而是包含单个列表项的4个列表。

所以我们整理一下，一切正常。

.left {
  float: left;
  margin-top: 50px;
  width: 10%;
  height: 1000px;
  background-color: #B9D7D9;
  margin-bottom: 10px;
}
.right {
  float: left;
  margin-top: 50px;
  width: 88%;
  height: 1000px;
  background-color: #F4EBC3;
  margin-bottom: 10px;
  padding-left: 10px;
}

<div class="left"></div>

<div class="right">

  <ul>
    <li>Some Link</li>
    <li>Some Link</li>
    <li>Some Link</li>
    <li>Some Link</li>
  </ul>

</div>

Answer 2

首先，您应该考虑如果您想使用项目符号列表，您应该编写如下代码：

  <ul>
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
    <li>Item4</li>
    <li>Item5</li>
  </ul>

如果尺寸小于可能导致某些问题的内容，则还可能存在包含<div>的问题。

您编写的代码只是浮动<div>标记，如果您想将列表项对齐或写入使用此代码：

ul li{
    float:right;
  }

您还可以查看以下链接以获取更多信息：

http://css.maxdesign.com.au/listutorial/08.htm

http://www.w3schools.com/cssref/css3_pr_align-items.asp

Answer 3

您应该考虑使用文本编辑器来帮助您验证HTML的语法（例如，使用标记自动关闭或语法错误突出显示）。问题是，在4个列表中，3个包含错误的结束标记：它应该是</ul>而不是<ul>。

此外，在XML中，自闭标签在标签的末尾有斜杠，而不是开头。所以新行应该写成<br/>。

如果您解决了这两个问题，列表将按预期显示。

为什么我的无序列表向右浮动而不是向左？

3 个答案: