Menu - problem z borderem

Question

Witam mam następujący problem

Uczę się stylizować menu itd Ale mam taki problem, że border nie dochodzi do końca diva. Co robię źle?

ol
{
	padding: 0;
	margin: 0;
	list-style-type: none;
	font-size: 30px;
	display: inline-block;
	line-height: 200%;
}

ol > li
{
	float: left;
	width: 200px;
	border-right: 1px dashed black;
}

ol > li:first-child
{
	border-left: 1px solid black;
}

ol a
{
	text-decoration: none;
	display: block;
	color: white;
}

Answer 1

Usuń display: inline-block dla elementu ol - on-line.

Spróbuj użyć: flex.

[ on-line ]

ol
{
  ...
  /*display: inline-block;*/
  display: flex;
  line-height: 200%;  
}

ol > li
{
  /*float: left;*/
  width: 200px;
  border-right: 1px dashed black;
}

 

Comments

Działa, dziękuje, a byłbyś mi w stanie jakoś w skrócie objaśnić jak to działa?

---

IMHO obecnie najprostszym rozwiązaniem jest "użyć" flex na elemencie listy (<ol>, <ul>) w przypadku Twojego kodu.

Sprawdź, on-line, zwróć uwagę na zapis kodu html i w css na fragment oznaczony

/* display settings *********/

 

BTW,

• Fighting the Space Between Inline Block Elements

• When do you use inline-block?

• Flexbox Nav Bar

• The float property in CSS

---

Dziękuję za pomoc

---

@VBService, Wszystko okej tylko teraz wszystkie kafelki przysuneły mi się do lewej strony

---

@ardillive, użyj justify-content wraz z flex, np.

[ on-line ]

ol {
  ...

  display: flex;
  justify-content: flex-end;
}

 

---

@ardillive, zapomniałem zaprezentować Tobie taki przypadek

ol
{
  ...
  display: flex;
  justify-content: flex-end;
}

ol li:first-child {
  margin-right: auto;
}