CSS-在div中创建一个列表

Question

我想知道如何在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;
}

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

已编辑：我想要更改此内容：

类似

Answer 1

你不应该在ul上使用position: absolute。如果必须，您必须在div上使用position: relative或position: absolute。

Answer 2

尝试此更改.resume_class css position

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

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

即可

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 4

.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 style="width:100%">
            <h3>Skills</h3>
                <li>Languages: C++, Java , C , HTML , PHP</li>
                <li>Frameworks: .NET, Zendesk , Solid works NetBeans Rational Rose, SPSS, Maple</li>

            </ul>
        </div>