Question

我正在尝试实现与图1中相同的TABLE，目前我在图2中。

我怎样才能实现这个目标？我使用了与图像1中的人完全相同的HTML，因此我需要使用CSS执行此操作。

我尝试过使用floats / text-align，我不完全确定如何实现这种效果。

您可以在此处查看实际的网站模板：https://empla.popitheme.com/v2/

图1

图2

    <section id="about">
    <div class="container col-6">
        <div class="row">
          <div class="col-5 about-photo">
            <a href="https://placeholder.com"><img src="http://via.placeholder.com/500x500" class="img-fluid"></a>
          </div>
          <div class="col-7 about-text">
            <h1>I'm <span class="text-primary">Oliver Stott</span></h1>
            <p>Web Design and Junior Web Developer</p>     
              <div class="col-8">
               <ul class="table">
                  <li>
                      <span><strong>Age</strong></span>
                      <span>19</span>
                  </li>
                  <li>
                      <span><strong>Address</strong></span>
                      <span>1234 Street, W3 Island</span>
                  </li>
                  <li>
                      <span><strong>Email</strong></span>
                      <span>contact@domain.com</span>
                  </li>
                  <li>
                      <span><strong>Phone</strong></span>
                      <span>+0123 456 789</span>
                  </li>
                  <li>
                      <span><strong>Website</strong></span>
                      <span>
                          <a href="#">http://www.envato.com</a>
                      </span>
                  </li>
              </ul>
              </div>

            </div>
          </div>
        </div>
      </div>   
  </section>

我的CSS

 #about .container{
        background-color: #fff;
        padding: 0;
        height: auto;
        margin: 20px auto;
        text-align: center;
        box-shadow: 0px 0px 40px -10px rgba(59,66,71,1);
        border: 0.5px solid #72A7A3;
    }
    .about-photo{
        height: auto;
        width: 100;
    }
    .table, h1, p{
        clear: both;
        float: left;
        padding-left: 0;
    }
    .about-text h1{
        padding-top: 20px;
    }
    .about-text p{
        padding-top: 10px;
        font-size: 1.2rem;
    }
    .table li{
        text-align: left;
        list-style-type: none;

    }
    span{
        padding-left: ;
        text-align: right;
    }

Answer 1

由于那些是类似于表的数据，因此您应该使用table结构（即table标记等）。我不想重写你的整个代码，所以我只是通过CSS将表属性应用于你的标记：

（在完整视图中打开以正确查看，因此内容不会从容器中取出）

#about .container {
  background-color: #fff;
  padding: 0;
  height: auto;
  margin: 20px auto;
  text-align: center;
  box-shadow: 0px 0px 40px -10px rgba(59, 66, 71, 1);
  border: 0.5px solid #72A7A3;
}

.about-photo {
  height: auto;
  width: 100px;
}

.table {
  display: table;
}

.table li {
  display: table-row;
}

.table li span {
  display: table-cell;
  text-align: left;
}

.table li span:first-child {
  min-width: 120px;
}

h1,
p {
  clear: both;
  float: left;
  padding-left: 0;
}

.about-text h1 {
  padding-top: 20px;
}

.about-text p {
  padding-top: 10px;
  font-size: 1.2rem;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<section id="about">
  <div class="container">
    <div class="row">
      <div class="col-5 about-photo">
        <a href="https://placeholder.com"><img src="http://via.placeholder.com/500x500" class="img-fluid"></a>
      </div>
      <div class="col-7 about-text">
        <h1>I'm <span class="text-primary">Oliver Stott</span></h1>
        <p>Web Design and Junior Web Developer</p>
        <div class="col-8">
          <ul class="table">
            <li>
              <span><strong>Age</strong></span>
              <span>19</span>
            </li>
            <li>
              <span><strong>Address</strong></span>
              <span>1234 Street, W3 Island</span>
            </li>
            <li>
              <span><strong>Email</strong></span>
              <span>contact@domain.com</span>
            </li>
            <li>
              <span><strong>Phone</strong></span>
              <span>+0123 456 789</span>
            </li>
            <li>
              <span><strong>Website</strong></span>
              <span>
                          <a href="#">http://www.envato.com</a>
                      </span>
            </li>
          </ul>
        </div>

      </div>
    </div>
  </div>
</section>

Answer 2

在li标记的css中设置一些padding并设置border-bottom。

为了将li集margin:0与ul标记对齐。

这可能会有所帮助。

元素不会叠加在彼此之上

2 个答案: