Jak wykonałbyś wszystkie elementy <li> w elemencie <ul>, aby być wyświetlane w linii, a w jaki sposób wybierzesz całą listę na stronie? Musisz zastosować CSS bezpośrednio do samego elementu <ul>, nie można użyć elementu macierzystego.

Próbowałem z display:inline-flex, ale nie można wyrównać elementów <li> w centrum, więc każdy możliwy sposób na to zrobić?

Oto moje skrzypce, ale nie mogę wyrównać <li> w centrum jako: https://jsfiddle.net/Pymg30YR/

2
Umair Shah Yousafzai 16 luty 2017, 18:58

2 odpowiedzi

Najlepsza odpowiedź

Problem z inline-flex jest to, że Twoje ul weźmie szerokość jego treści, więc nie można wyśrodkować elementów wewnątrz (jak nie ma miejsca na obu stron)

Aby to naprawić, po prostu wykonaj ul flex, a następnie dodaj justify-content:center:

ul {
    padding:0; 
    margin:0;
    display: flex;
    list-style: none;
    justify-content:center;
}
<ul>
	<li>Link 1</li>
	<li>Link 2</li>
	<li>Link 3</li>
	<li>Link 4</li>
	<li>Link 5</li>
	<li>Link 6</li>
	<li>Link 7</li>
	<li>Link 8</li>
	<li>Link 9</li>
	<li>Link 10</li>
</ul>
	
7
Pete 16 luty 2017, 16:03

Html

<ul>
  <li>a list item </li>
  <li>a loooooooooooooooooooong list item </li>
  <li>another list item</li>
</ul>

Css

ul {
  display: table;
  margin: 0 auto;
}

li {
  float: left;
  margin: 0 10px;
  list-style-type: none;
}

Próbny http://jsfiddle.net/fnfyr/467/

-1
alex 16 luty 2017, 16:16