ちょっとディープな生物の世界

【CSS】リスト関連のプロパティ

リストを後ろにずらす

<ul class="ulclass">
 <li>list1</li>
 <li>list2</li>
</ul>

<ul>
 <li>list1</li>
 <li>list2</li>
</ul>
.ulclass{
  list-style-position:inside;
}

  • list1
  • list2
  • list1
  • list2

行頭記号を消す

<ul class="ulclass">
 <li>list1</li>
 <li>list2</li>
</ul>
.ulclass{
  list-style-type:none;
}

  • list1
  • list2

行頭記号を数字にする

<ul class="ulclass">
 <li>list1</li>
 <li>list2</li>
</ul>
.ulclass{
  list-style-type:decimal;
}

  • list1
  • list2

行頭記号を画像にする

<ul class="ulclass">
 <li>list1</li>
 <li>list2</li>
</ul>
.ulclass{
  list-style-image:url(http://manabu-biology.com/wp-content/uploads/2020/11/00164_01-e1606309240384.png);
}

  • list1
  • list2

行間を広くする

.ulclass{
  line-height:1.7;
}

li要素を横に並べる

<ul class="ulclass">
 <li>list1</li>
 <li>list2</li>
</ul>
.ulclass li{
  display:block;
  float:left;
}

  • list1
  • list2

幅を指定する

<ul class="ulclass">
 <li>list1</li>
 <li>list2</li>
</ul>
.ulclass li{
  display:block;
  float:left;
  width:70px;
}

  • list1
  • list2

ボーダーを入れる

<ul class="ulclass">
 <li>list1</li>
 <li>list2</li>
</ul>
.ulclass li{
  display:block;
  float:left;
  width:70px;
 border-left: 1px solid #999999;
}

  • list1
  • list2

一番左の項目のボーダーを削除するには次のプロパティを記述します。

li:nth-child(1){
  border-left:none;
}

コメントを残す

メールアドレスが公開されることはありません。