21

箇条書きのリストがあります。liテキストをaの中に入れspan、フォントサイズをliスパンよりも小さくすることで、箇条書きを小さくしました。問題は、箇条書きがテキストに対して垂直方向に整列されていないことです。どうすれば修正できますか？

jsFiddle： http: //jsfiddle.net/tXzcA/

li {
  font-size: 15px;
}

li span {
  font-size: 25px;
}
<ul>
  <li><span>text1</span></li>
  <li><span>text2</span></li>
  <li><span>text3</span></li>
  <li><span>text4</span></li>
</ul>

4

4 に答える 4

12

独自の箇条書きを作成して、任意のサイズにすることができます。

li{
  font-size: 15px;
  list-style-type:none;

}
li span{
  font-size: 25px;
}

ul li:before {
   content: "•";
   font-size: 80%;
   padding-right: 10px;
}

font-size必要なサイズに変更するだけです。

jsFiddle

于 2013-01-15T17:16:11.137 に答える
10

これを試して：

li span{
  font-size: 25px;
  vertical-align:middle;
  padding-bottom:5px;
}

ここでそれを参照してください：http：//jsfiddle.net/tXzcA/19/

于 2013-01-15T17:14:22.577 に答える
6

これは私が使用したものであり、弾丸とコンテンツの両方を中心にしています

Jsfiddle： http: //jsfiddle.net/VR2hP/14/

CSS：

ul {
  padding-left: 5em;
  list-style: none;
}

li.twitter::before,
li.fb::before {    
  font-family: 'FontAwesome';
  margin: 0 .2em 0 -1.5em;
  font-size: 3em;
  vertical-align: middle;
}

li.twitter::before {
  content: '\f081';
}

li.fb::before {
    content: '\f082';
}

li {
  list-style-type: none;
}

li span {
  display: inline-block;
  vertical-align: middle;
}
于 2013-11-27T02:02:51.453 に答える
2

順序付けされていないリストを使用して、リストアイテムをテーブルとして表示します。

この例を見てください：https ：//jsfiddle.net/luenib/jw1ua38v/

アイコン、番号、または配置したいものはすべて、スパン内に配置されます。スパンの内容は水平方向と垂直方向の中央に配置されます。アイコンを上部に表示したくない場合に非常に便利です。段落内のテキストは左側にスペースを保持するため、テキストが複数行に及ぶ場合、アイコンの下には表示されません。

CSS：

ul {
  padding-left: 0;
}

li {
  display: table;
}

li span {
  width: 40px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

HTML：

<ul>
  <li><span>1</span>
    <p>Some text here. Some text here. Some text here. Some text here. Some text here. Some text here.</p>
  </li>
  <li><span>2</span>
    <p>Some text here. Some text here. Some text here.</p>
  </li>
</ul>
于 2018-08-21T21:52:45.300 に答える