カスタム箇条書きを使用するときに折り返されるliテキストの整列

debugcn 投稿 Dev

p44v9n

私は小さな問題を抱えていて、誰かがクイックフィックスを思い付くことができるかどうか疑問に思っていましたか？

問題

li：before {content：などを使用してカスタムの箇条書きを使用するliのulがあります。単語を適切に整列させようとしています。4番目のli項目で、単語が次の項目に折り返されるとわかります。行は単語の下ではなく、箇条書きの下で始まります。

ここに画像の説明を入力してください

修正の試み

li：beforeを使用して弾丸を実行するのは問題だと思って、他の方法を試しましたが...
- 組み込みのli箇条書きスタイルを使用したくない（醜い）
- font-awesomeの箇条書きのスタイルを使用してみましたが、同じことが起こります（li：beforeメソッドも使用していると思います）
- ブラウザのサイズを変更するなどの理由で、2行目を手動で間隔を空けたくありません
li：beforeメソッドを使用して、絶対位置を使用して弾丸を左にシフトしようとしました：3px（同様のstackoverflowの質問で推奨されているように）が、それも機能しませんでした。

例

問題のデモを見るには、ここをクリックしてください：http：//jsfiddle.net/MS9Z9/

（以下のコードは省略されています）

.panel-body ul li {
    list-style-type:none;
}
.panel-body ul li:before {
    content:"\27A8\00a0\00a0";
}

解決策は素晴らしいですが、アイデアもありがたいです、ありがとう！

黄道主義

できるよ

body .sidebar {
  background-color: #ccc;
  padding: 20px;
  width: 330px;
  float: right;
}

.panel-head {
  background-color: #53d;
  color: #fff;
  padding: .3em;
  text-align: center;
  font-family: @fancyfont;
  font-size: 1.2em;
}

.panel-body {
  color: #aaa;
  background-color: #fff;
}

.panel-body ul {
  display: inline;
  padding: 0;
}

.panel-body ul li {
  padding: 0.5em 0.5em 0.5em 1.5em;
  border-bottom-style: solid;
  border-color: #ccc;
  list-style-type: none;
  margin: 0;
  position: relative;
}

.panel-body ul li:last-child {
  border-bottom-style: none;
}

.panel-body ul li a {
  text-decoration: none;
}

.panel-body ul li a:visited {
  color: #000;
}

.panel-body ul li:before {
  content: "\27A8\00a0\00a0";
  position: absolute;
  left: 7px;
}

.panel-body ul li:hover,
.panel-body ul li:hover a {
  background-color: #53d;
  color: #fff;
}

<div class="sidebar">
  <div class="panel">
    <div class="panel-head">
      <p>Your Menu</p>
    </div>
    <div class="panel-body">
      <ul>
        <li><a href="#">Lorem ipsum dolor</a>
        </li>
        <li><a href="#">Lorem ipsum dolor</a>
        </li>
        <li><a href="#">Lorem ipsum dolor</a>
        </li>
        <li><a href="#">Lorem ipsum dolor</a>
        </li>
        <li><a href="#">Lorem ipsum dolor</a>
        </li>
        <li><a href="#">Lorem ipsum dolor</a>
        </li>
        <li><a href="#">Lorem ipsum dolor sit amet draco dormiens numquam titallandus</a>
        </li>
        <li><a href="#">Lorem ipsum dolor</a>
        </li>
        <li><a href="#">Lorem ipsum dolor</a>
        </li>
      </ul>
    </div>
  </div>

置きbefore、コンテンツ絶対にあなたのLiは、相対位置にすると、あなたは自由にカスタム弾丸を調整することができます

もう1つの方法は、beforeコンテンツを左にフロートさせることです。

body .sidebar {
  background-color: #ccc;
  padding: 20px;
  width: 330px;
  float: right;
}

.panel-head {
  background-color: #53d;
  color: #fff;
  padding: .3em;
  text-align: center;
  font-family: @fancyfont;
  font-size: 1.2em;
}

.panel-body {
  color: #aaa;
  background-color: #fff;
}

.panel-body ul {
  display: inline;
  padding: 0;
}

.panel-body ul li {
  padding: 0.5em;
  border-bottom-style: solid;
  border-color: #ccc;
  list-style-type: none;
  margin: 0;
}

.panel-body ul li:last-child {
  border-bottom-style: none;
}

.panel-body ul li a {
  text-decoration: none;
}

.panel-body ul li a:visited {
  color: #000;
}

.panel-body ul li:before {
  content: "\27A8\00a0\00a0";
  float: left;
}

.panel-body ul li:hover,
.panel-body ul li:hover a {
  background-color: #53d;
  color: #fff;
}

<body>
  <div class="sidebar">
    <div class="panel">
      <div class="panel-head">
        <p>Your Menu</p>
      </div>
      <div class="panel-body">
        <ul>
          <li><a href="#">Lorem ipsum dolor</a>
          </li>
          <li><a href="#">Lorem ipsum dolor</a>
          </li>
          <li><a href="#">Lorem ipsum dolor</a>
          </li>
          <li><a href="#">Lorem ipsum dolor</a>
          </li>
          <li><a href="#">Lorem ipsum dolor</a>
          </li>
          <li><a href="#">Lorem ipsum dolor</a>
          </li>
          <li><a href="#">Lorem ipsum dolor sit amet draco dormiens numquam titallandus</a>
          </li>
          <li><a href="#">Lorem ipsum dolor</a>
          </li>
          <li><a href="#">Lorem ipsum dolor</a>
          </li>
        </ul>
      </div>
    </div>
</body>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]