html - 文本不换行到下一行

Question

我将此部分的内容不换行到列表项中的下一行。我怎样才能让它与div内容的宽度重叠

第二行主要是说安全问题二

我的 HTML 和 CSS:

<ul class="o-pf-list o-pf-list--mg-left col-md-8 col-lg-8">
    <!-- o-pf-list--mg-left -->
    <li class="o-pf-list__item"> <label class="col-md-8 col-lg-8" for="password">Password</label> <div class="pull-left"> ******** </div> </li>
    <li class="o-pf-list__item"> <label class="col-md-8 col-lg-8" for="security">Security Question one</label> <div class="o-pf-text-align">Mothers maiden name? </div> </li>
    <li class="o-pf-list__item"> <label class="col-md-8 col-lg-8" for="security">Security Question two</label> <div class="o-pf-text-align">Name of the pre-primary school you attended? </div> </li>
    <li class="o-pf-list__item"> <label class="col-md-8 col-lg-8" for="ip_hostnames">Allowed IPs &amp; hostnames</label> <div class="pull-left"> All (no restrictions) </div> </li>
    <li class="o-pf-list__item"> <label class="col-md-8 col-lg-8" for="allowed_countries">Allowed countries</label> <div class="pull-left"> All (no restrictions) </div> </li>
</ul>

我的 CSS:

.o-pf-list {
    padding: 0px;
    margin: 0px;
    list-style-type: none;
}

.o-pf-list--mg-left {
    margin-left: -15px;
}

.o-pf-list__item {
    padding: 5px 0px;
}

.o-pf-text-align {
    position: relative;
    top: -12px;
    float: right;
    line-height: 0;
}

Answer 1

仅使用引导方式，只需将 col-md-4 col-lg-4 添加到 li 中的 div，如下所示。

      <li class="o-pf-list__item"> <label class="col-md-8 col-lg-8" for="password">Password</label>
    <div class="col-md-4 col-lg-4"> ******** </div>
  </li>

.o-pf-list {
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.o-pf-list--mg-left {
  margin-left: 0px;
}

.o-pf-list__item {
  padding: 5px 0px;
}

.o-pf-text-align {
  /* position: relative;
    top: -12px;
    float: right;
    line-height: 0; */
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<ul class="o-pf-list o-pf-list--mg-left col-md-8 col-lg-8">
  <!-- o-pf-list--mg-left -->
  <li class="o-pf-list__item"> <label class="col-md-8 col-lg-8" for="password">Password</label>
    <div class="col-md-4 col-lg-4"> ******** </div>
  </li>
  <li class="o-pf-list__item"> <label class="col-md-8 col-lg-8" for="security">Security Question one</label>
    <div class="o-pf-text-align col-md-4 col-lg-4">Mothers maiden name? </div>
  </li>
  <li class="o-pf-list__item"> <label class="col-md-8 col-lg-8" for="security">Security Question two</label>
    <div class="o-pf-text-align col-md-4 col-lg-4">Name of the pre-primary school you attended? </div>
  </li>
  <li class="o-pf-list__item"> <label class="col-md-8 col-lg-8" for="ip_hostnames">Allowed IPs &amp; hostnames</label>
    <div class="col-md-4 col-lg-4"> All (no restrictions) </div>
  </li>
  <li class="o-pf-list__item"> <label class="col-md-8 col-lg-8" for="allowed_countries">Allowed countries</label>
    <div class="col-md-4 col-lg-4"> All (no restrictions) </div>
  </li>
</ul>

Bootstrap way

你可以使用 flex 让它改变 css 部分

Codepen link

   .o-pf-list__item {
      padding: 5px 0px;
      display: flex;
      justify-content: space-between;
    }

    .o-pf-list__item label,
    div {
      flex: 1;
    }

    .o-pf-text-align {
     /* position: relative; */
     /* top: -12px; */
     /* float: right; */
     /* line-height: 0; */
   }

   .o-pf-list--mg-left {
      margin-left: 0px;
   }

.o-pf-list {
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.o-pf-list--mg-left {
  margin-left: 0px;
}

.o-pf-list__item {
  padding: 5px 0px;
  display: flex;
  justify-content: space-between;
}

.o-pf-list__item label,
div {
  flex: 1;
}

.o-pf-text-align {
  /* position: relative; */
  /* top: -12px; */
  /* float: right; */
  /* line-height: 0; */
}

<ul class="o-pf-list o-pf-list--mg-left col-md-8 col-lg-8">
  <!-- o-pf-list--mg-left -->
  <li class="o-pf-list__item"> <label class="col-md-8 col-lg-8" for="password">Password</label>
    <div class="pull-left"> ******** </div>
  </li>
  <li class="o-pf-list__item"> <label class="col-md-8 col-lg-8" for="security">Security Question one</label>
    <div class="o-pf-text-align">Mothers maiden name? </div>
  </li>
  <li class="o-pf-list__item"> <label class="col-md-8 col-lg-8" for="security">Security Question two</label>
    <div class="o-pf-text-align">Name of the pre-primary school you attended? </div>
  </li>
  <li class="o-pf-list__item"> <label class="col-md-8 col-lg-8" for="ip_hostnames">Allowed IPs &amp; hostnames</label>
    <div class="pull-left"> All (no restrictions) </div>
  </li>
  <li class="o-pf-list__item"> <label class="col-md-8 col-lg-8" for="allowed_countries">Allowed countries</label>
    <div class="pull-left"> All (no restrictions) </div>
  </li>
</ul>