Question

我将此部分放在一个表单中，其中内容不会换行到列表项中的下一行。如何让它与div内容的宽度重叠

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

我的HTML＆amp; 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>

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

文本不会换行到下一行

1 个答案: