html - CSS-在div内建立 list

我想知道如何在div内自动插入文本。我使用<br>，但这是最好的方法吗？

这是我的代码：

的HTML

    <div class="resume">
        <div class="resume_class">
            <ul>
            <h3>Skills</h3>
                <li>Languages: C++, Java , C , HTML , PHP</li>
                <li>Frameworks: .NET, Zendesk , Solid<br> works NetBeans Rational Rose, SPSS, Maple</li>

            </ul>
        </div>
    </div>

的CSS

.resume
{
    margin-right: 2%;
}
.resume_class
{
    display: inline-block;
    width: 27%;
    height: 400px;
    margin-left: 5%;
    background: purple;
}
.resume_class ul
{
    position: absolute;
}

.resume {
  margin-right: 2%;
}
.resume_class {
  display: inline-block;
  width: 27%;
  height: 400px;
  margin-left: 5%;
  background: purple;
}
.resume_class ul {
  position: absolute;
}

<div class="resume">
  <div class="resume_class">
    <ul>
      <h3>Skills</h3>
      <li>Languages: C++, Java , C , HTML , PHP</li>
      <li>Frameworks: .NET, Zendesk , Solid
        <br>works NetBeans Rational Rose, SPSS, Maple</li>

    </ul>
  </div>

编辑：我想改变这个：



像

最佳答案

只需使用.resume_class { position: relative; }

.resume {
  margin-right: 2%;
}
.resume_class {
  display: inline-block;
  width: 27%;
  height: 400px;
  margin-left: 5%;
  background: purple;
  position: relative;
}
.resume_class ul {
  position: absolute;
}

<div class="resume">
  <div class="resume_class">
    <ul>
      <h3>Skills</h3>
      <li>Languages: C++, Java , C , HTML , PHP</li>
      <li>Frameworks: .NET, Zendesk , Solid
        <br>works NetBeans Rational Rose, SPSS, Maple</li>

    </ul>
  </div>