Bagaimana untuk Memusatkan Menu `` Mendatar Menggunakan CSS Floats dan Wrapper?

Memusatkan

Menu

Cabaran Yang Dihadapi

Semasa cuba menjajarkan tengah menu mendatar menggunakan gabungan blok sebaris, blok dan jajaran tengah, hasil yang diinginkan tetap sukar difahami.

Cadangan Penyelesaian Dari Web

Sumber (http://pmob.co.uk/pob/centred-float.htm) mencadangkan kaedah yang melibatkan elemen pembalut terapung ke kiri dan dialihkan ke luar skrin ke kiri, disertai dengan elemen dalam terapung ke kanan.

#buttons {
  float: right;
  position: relative;
  left: -50%;
  text-align: left;
}

#buttons ul {
  list-style: none;
  position: relative;
  left: 50%;
}

#buttons li {
  float: left;
  position: relative;
}

#buttons a {
  text-decoration: none;
  margin: 10px;
  background: red;
  float: left;
  border: 2px outset blue;
  color: #fff;
  padding: 2px 5px;
  text-align: center;
  white-space: nowrap;
}

<div>

Kesimpulan

Kod yang disediakan secara berkesan memusatkan

menu dalam DIV, mengalihkan item senarai ke tengah ruang yang tersedia. Walau bagaimanapun, pendekatan ini tidak menangani pemusatan item senarai itu sendiri dalam
unsur. Untuk itu, JavaScript mungkin diperlukan.

Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Menu `` Mendatar Menggunakan CSS Floats dan Wrapper?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!