Question

我有一组三个div，每个div包含一个.header类和.content类。我主要将.header类对齐，但问题是让.content类在标题下面对齐并且在所有边上都有大约10-15px的填充，文本向左移动标题和内容。这应该有一个简单的解决方案，但我只是没有看到它。

  <div class="container">
  <div class="row">
    <section>
      <ul class="nav nav-wizard">
        <li class="active">
          <h5 class="header">
          Header
          </h5>
          <p class="content">
            Lorem ipsum dolorset amicum
          </p>
        </li>
        <li class="active">
          <h5 class="header">
            Header
          </h5>
          <p class="content">
            Lorem ipsum dolorset amicum
          </p>
        </li>
        <li class="active">
          <h5 class="header">
            Header
        </h5>
          <p class="content">
            Lorem ipsum dolorset amicum
          </p>
      </ul>
    </section>
  </div>
</div>

CSS

li {
  width: 190px;
}

ul.nav-wizard:before {
  position: absolute;
}

ul.nav-wizard li {
  position: relative;
  float: left;
  height: 60px;
  display: inline-block;
  text-align: center;
  padding: 0 20px 0 30px;
  margin: 8px;
  font-size: 16px;
  line-height: 46px;
}

ul.nav-wizard li a {
  color: #428bca;
  padding: 0;
}

ul.nav-wizard li a:hover {
  background-color: transparent;
}

li:last-child:before {
  border-left: 16px #6633cc;
}

li:last-child:after {
  position: absolute;
  display: block;
  border: 31px solid transparent;
  border-left: 16px solid #6633cc;
  border-right: 0;
  top: -1px;
  z-index: 10;
  content: '';
  right: -15px;
}

ul.nav-wizard li.active:nth-child(-n+2) {
  background: #6633cc;
}

.header {
  margin: 0 auto;
  font-weight: bold;
  float: left;
}

p {
  float: left;
}

.content {
  margin: -29px;
  position: relative;
}

ul.nav-wizard .active ~ li {
  color: #999999;
  background: #ddd;
}

ul.nav-wizard .active ~ li:after {
  border-left: 16px solid #ddd;
}

当前的JSFIDDLE：https://jsfiddle.net/zfcm2y27/

Answer 1

尝试使用 Flexbox ，这是'ul.nav-wizard li'选择器的经过编辑和运行的版本，希望它有效

ul.nav-wizard li {
  position: relative;
  float: left;
  height: 60px;
  display: flex;
  text-align: center;
  padding: 0 20px 0 30px;
  margin: 8px;
  font-size: 16px;
  line-height: 46px;
  flex-direction: column;
}

Answer 2

在js小提琴中将.content类更改为： -

.content {
 position: absolute;
 margin-top: 60px;
 border: 1px solid red;
 left: 0;
 width:100%;
}

修改： - ，要将文字留至左侧，您需要将ul.nav-wizard li的填充从padding: 0 20px 0 30px;更改为padding: 0 20px 0 10px;

border red仅供参考。去掉它。希望这有帮助

Answer 3

我创建了一个样本。我删除了一些重复的元素调用和位置以及CSS文件中的一些浮点数。这正是你所说的吗？

CSS

foreach (HtmlNode link in doc.SelectNodes("//a[@href]"))
{
    .....
    var title = link.InnerText.Trim();
}

无法在div中对齐内容

3 个答案: