Question

更新我在li项目内的div中添加了两个跨度。到目前为止，我几乎得到了正确对齐的列表，但现在整行文本转移到下一行而不是单词换行。

原始问题： 我创建了一个有序列表，其边框半径为圆，填充和背景颜色，但无论我在有序列表编号下面尝试文本换行。

问题：如何阻止文字在圈内的有序列表编号下包装？

HTML

<div class="child">
<div class="child2">

<h3 class="title">
ddddddddd dddddddddd ddddddddd ddddddddddddddddd
</h3>
<ol class="circlegroup">
<li>1 I want to center the parent but align this to the left ddddddddddd dddddd dddddd dddd dddddd</li>
<li>2 I want to center the parent but align this to the left ddddddddddd dddddd dddddd dddd dddddd</li>
<li>3 I want to center the parent but align this to the left ddddddddddd dddddd dddddd dddd dd dddd</li>

CSS：

body {min-height:100%!important; height:100%!important;}

html {min-height:100%!important; height:100%!important;}

.parent {background:yellow; width:100%; height:100%;  display: table;
}

.child {background:red; width:70%;  display: table-cell;
    vertical-align: middle;}

    .child2 {background:#fff; width:100%; display:inline-block;
    vertical-align: middle;}

    .circlegroup {  }

 .circlegroup li {
   list-style:none;
  width:auto; margin-left:10%;
  height: auto;
  border: 1px solid #d3d3d3;
  word-wrap: break-word;

  margin-bottom:40px;
}

.title {margin-left:10%;}


ol { list-style: none; padding-left: 10px; text-indent:0px; margin-left:5px; }

ol li {color:#666; }

ol li:first-letter {color:#fff; background:#333; border-radius:50%; border: 5px solid #333;font-size:4vw;   vertical-align:middle;
  behavior: url(PIE.htc);padding-left:2%; padding-right:2%; padding-top:0%; padding-bottom:0%; font-weight:bold; margin-right:1vw; height:100%;  list-style-position:outside;}


ol li 
{ list-style-position:outside;

}

Answer 1

这是你想要的吗？我不得不改变一下，尤其是让数字周围的圆圈正确，因为它们在你的例子中并不总是圆形的。它们的形状取决于窗户的宽度但是现在我不确定你是否想让圆圈进入边界内。

＆＃13;

html, body {
  padding:0; margin:0;
  min-height: 100% !important;
  height: 100% !important;
}

.parent {
  background: yellow;
  width: 100%; height: 100%;
  display: table;
}

.child {
  background: red;
  width: 70%;
  display: table-cell;
  vertical-align: middle;
}

.child2 {
  background: #fff;
  width: 100%;
  display: inline-block;
  vertical-align: middle;
}

.title {
  margin-left: 10%;
}

.circlegroup {
  counter-reset:circle;
  list-style: none;
  padding-left: 10px;
  text-indent: 0px;
  margin-left: 5px;
}

.circlegroup li {
  min-height: calc(7vw - 40px);
  list-style: none;
  width: auto;
  margin-left: 10%;
  border: 1px solid #d3d3d3;
  word-wrap: break-word;
  margin-bottom: 40px;
  color: #666;
  position:relative;
}

.circlegroup li:before {
  counter-increment: circle;
  content:counter(circle);
  color: #fff;
  background: #333;
  border-radius: 50%;
  font-size: 4vw; line-height:1ch;
  box-sizing:content-box;
  width:1ch; height:1ch; padding:1ch;
  behavior: url(PIE.htc);
  font-weight: bold;
  margin-right: .25em;
  position:absolute; top:0; right:100%;
}

＆＃13;

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

<div class="container parent">

  <div class="child">
    <div class="child2">

      <h3 class="title">
ddddddddd dddddddddd ddddddddd ddddddddddddddddd
</h3>
      <ol class="circlegroup">
        <li>I want to center the parent but align this to the left ddddddddddd dddddd dddddd dddd dddddd</li>
        <li>I want to center the parent but align this to the left ddddddddddd dddddd dddddd dddd dddddd</li>
        <li>I want to center the parent but align this to the left ddddddddddd dddddd dddddd dddd dd dddd</li>
        <li>I want to center the parent but align this to the left ddddddddddd dddddd dddddd dddd dddddssddddddddddddddddddddd</li>
        <li>I want to center the parent but align this to the left ddddddddddd dddddd dddddd dddd dddddd</li>
      </ol>
    </div>
  </div>

</div>

＆＃13;

使用圆填充

1 个答案: