Atölye › Kartvizitim › 10/12. adım

Bağlantılar yan yana

Ne yapıyoruz

Liste şu an alt alta, başında madde işaretleri (•) ile duruyor. Kartvizitte bağlantılar genelde yan yana durur. Madde işaretlerini kaldırıp bağlantıları yan yana dizeceğiz.

Bunun için CSS'in en kullanışlı araçlarından biri: flexbox (esnek kutu).

```css
ul {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 16px;
}
```

Ne işe yarıyor

• list-style: none; → madde işaretlerini kaldır.
• padding: 0; → listelerin soldaki iç boşluğunu kaldır (madde işareti için ayrılmıştı).
• display: flex; → flexbox: kutunun içindekileri (burada li'leri) yan yana diz. Sayfa düzeni kurmanın en yaygın yolu.
• gap: 16px; → yan yana dizilen parçaların arasında 16 piksel boşluk.

Sıra sende

h1 kuralının altına bir boş satır bırak ve ul kuralını yaz. Çalıştır.

Beceriler: CSS ile görünüm

← Bağlantılarını ekle Tepki veren bağlantılar →

Tüm adımlar

1. Başlık olarak adın
2. Kendin hakkında bir satır
3. Bir kutuya koy
4. İlk CSS
5. Kutuyu karta benzet
6. Kartı ortala
7. Yumuşak bir gölge
8. Adını renklendir
9. Bağlantılarını ekle
10. Bağlantılar yan yana
11. Tepki veren bağlantılar
12. Kendin yap: tepki veren kart