Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

Wyrównanie pozycji w menu

16 views
Skip to first unread message

Roman Tyczka

unread,
Jan 24, 2019, 6:59:14 AM1/24/19
to

Mam zrobione w Bootstrapie 4 menu, z jedną pozycją rozwijaną w dół. Dodałem
tam sobie ikonki i zaczęło to wyglądać koszmarnie:

http://snap.ashampoo.com/fSKu5yIkFNAGC3nRqxTtUOf4fsXXJn2ObGe7aMIg2jM7FZqVsEJitpEYc6RLln2m

kod tego submenu:

<div class="dropdown-menu" role="menu">
<a class="dropdown-item" role="presentation" href="#">
<i class="fa fa-fax text-primary"></i><span>&nbsp;Jeden</span>
</a>
<a class="dropdown-item" role="presentation" href="#">
<i class="fa fa-info text-primary"></i><span>&nbsp;Dwa</span>
</a>
<a class="dropdown-item" role="presentation" href="#">
<i class="fa fa-copy text-primary"></i><span>&nbsp;Trzy</span>
</a>
</div>

Jak spowodować by opisy pozycji menu były równo, w jednej linii w pionie i
nie zależały od szerokości ikonek?


--
pozdrawiam
Roman Tyczka

Borys Pogoreło

unread,
Jan 24, 2019, 8:42:26 AM1/24/19
to
Dnia Thu, 24 Jan 2019 12:59:14 +0100, Roman Tyczka napisał(a):

> Jak spowodować by opisy pozycji menu były równo, w jednej linii w pionie i
> nie zależały od szerokości ikonek?

Zamień ikonę na element typu inline-block (o ile już takim nie jest) i
nadaj mu określoną szerokość. Albo wstaw ikonę w tło danego elementu +
padding z lewej.

--
Borys Pogoreło
borys(#)leszno,edu,pl

zpksoft

unread,
Jan 24, 2019, 11:05:22 AM1/24/19
to

>ciach
> Albo wstaw ikonę w tło danego elementu +
> padding z lewej.
>
> --
> Borys Pogoreło
> borys(#)leszno,edu,pl

Pewnie jest ikona w tle, ale dlaczego w tle znacznika <i>? (co tu jest italic?)

Zapewne klasy fa-fax, fa-info i fa-copy to definiują.

Paweł

Roman Tyczka

unread,
Jan 24, 2019, 2:40:03 PM1/24/19
to
On Thu, 24 Jan 2019 08:05:20 -0800 (PST), zpksoft wrote:

>> Albo wstaw ikonę w tło danego elementu +
>> padding z lewej.
>
> Pewnie jest ikona w tle, ale dlaczego w tle znacznika <i>? (co tu jest italic?)

Świat jest na innym etapie, <i> to już nie italic:

"In earlier versions of the HTML specification, the <i> element was merely
a presentational element used to display text in italics, much like the <b>
element was used to display text in bold letters. This is no longer true,
as these tags now define semantics rather than typographic appearance. A
browser will typically still display the contents of the <i> element in
italic type, but is, by definition, no longer required to."

Teraz <i> jest bliżej do <icon> niż <italic>, zaleca go sam oogiel, buk
internetów:

http://google.github.io/material-design-icons/#icon-font-for-the-web

--
pozdrawiam
Roman Tyczka

Roman Tyczka

unread,
Jan 24, 2019, 2:42:15 PM1/24/19
to
On Thu, 24 Jan 2019 14:40:30 +0100, Borys Pogoreło wrote:

>> Jak spowodować by opisy pozycji menu były równo, w jednej linii w pionie i
>> nie zależały od szerokości ikonek?
>
> Zamień ikonę na element typu inline-block (o ile już takim nie jest) i
> nadaj mu określoną szerokość.

Dzięki, tak zrobiłem i jest miodzio.

> Albo wstaw ikonę w tło danego elementu + padding z lewej.

A jak się wstawia w tło? Czy chodzi o CCSowe:

background-image: url("paper.gif");

Czy to zadziała z ikonami fontowymi typu awesome?

--
pozdrawiam
Roman Tyczka

Borys Pogoreło

unread,
Jan 24, 2019, 8:28:34 PM1/24/19
to
Dnia Thu, 24 Jan 2019 20:42:14 +0100, Roman Tyczka napisał(a):

> Czy to zadziała z ikonami fontowymi typu awesome?

Nie zadziała, musisz z nich zrobić osobny element (lub przynajmniej
pseudoelement). Do sztuczki z tłem potrzebujesz SVG.

--
Borys Pogoreło
borys(#)leszno,edu,pl

zpksoft

unread,
Jan 25, 2019, 7:30:11 AM1/25/19
to
W dniu czwartek, 24 stycznia 2019 20:40:03 UTC+1 użytkownik Roman Tyczka napisał:
> On Thu, 24 Jan 2019 08:05:20 -0800 (PST), zpksoft wrote:
>
> >> Albo wstaw ikonę w tło danego elementu +
> >> padding z lewej.
> >
> > Pewnie jest ikona w tle, ale dlaczego w tle znacznika <i>? (co tu jest italic?)
>
> Świat jest na innym etapie, <i> to już nie italic:

A zrobiłeś test? :)

>
> "In earlier versions of the HTML specification, the <i> element was merely
> a presentational element used to display text in italics, much like the <b>
> element was used to display text in bold letters. This is no longer true,
> as these tags now define semantics rather than typographic appearance. A
> browser will typically still display the contents of the <i> element in
> italic type, but is, by definition, no longer required to."
>

A ten cytat to skąd? Zresztą zapytam Googla

> Teraz <i> jest bliżej do <icon> niż <italic>, zaleca go sam oogiel, buk
> internetów:
>
> http://google.github.io/material-design-icons/#icon-font-for-the-web

jakoś to do mnie nie przemawia.
cyt: <i class="material-icons">face</i>
każdemu znacznikowi możesz przypisać jakąś klasę więc przypisanie jej pod <i> nie wiem dlaczego miałoby być interpretowane jakoś szczególnie.
Napisz np. <bla class="material-icons">face</bla> i zobacz jak to zadziała.

>
> --
> pozdrawiam
> Roman Tyczka

Paweł

Roman Tyczka

unread,
Jan 25, 2019, 8:08:19 AM1/25/19
to
On Fri, 25 Jan 2019 04:30:10 -0800 (PST), zpksoft wrote:

>>>> Albo wstaw ikonę w tło danego elementu +
>>>> padding z lewej.
>>>
>>> Pewnie jest ikona w tle, ale dlaczego w tle znacznika <i>? (co tu jest italic?)
>>
>> Świat jest na innym etapie, <i> to już nie italic:
>
> A zrobiłeś test? :)

A czytałeś to co jest poniżej?
Czyli: " A browser will typically still display the contents of the <i>
element in italic type, but is, by definition, no longer required to".


> jakoś to do mnie nie przemawia.
> cyt: <i class="material-icons">face</i>
> każdemu znacznikowi możesz przypisać jakąś klasę więc przypisanie jej pod <i> nie wiem dlaczego miałoby być interpretowane jakoś szczególnie.
> Napisz np. <bla class="material-icons">face</bla> i zobacz jak to zadziała.

Może do Ciebie nie przemawiać, ale jest taka konwencja i tyle, nikt Cię nie
zmusza do podążania za światem, możesz iść w drugą stronę, wolna wola.

--
pozdrawiam
Roman Tyczka

zpksoft

unread,
Jan 25, 2019, 8:24:35 AM1/25/19
to
> Może do Ciebie nie przemawiać, ale jest taka konwencja i tyle, nikt Cię nie
> zmusza do podążania za światem, możesz iść w drugą stronę, wolna wola.
>
> --
> pozdrawiam
> Roman Tyczka

A czy ja twierdzę że ktoś mnie zmusza? Ja nie krytykuję ścieżki którą podążasz.
Artykuuję swoje zdanie. Możesz go nie czytać.

Co do ikon to raczej stosuję tzw. htmlentities a nie obrazki (jpg, gif, svg czy inne).

Paweł

Roman Tyczka

unread,
Jan 25, 2019, 8:35:05 AM1/25/19
to
On Fri, 25 Jan 2019 05:24:33 -0800 (PST), zpksoft wrote:

>> Może do Ciebie nie przemawiać, ale jest taka konwencja i tyle, nikt Cię nie
>> zmusza do podążania za światem, możesz iść w drugą stronę, wolna wola.

> A czy ja twierdzę że ktoś mnie zmusza? Ja nie krytykuję ścieżki którą podążasz.
> Artykuuję swoje zdanie. Możesz go nie czytać.

Tak samo jak ja.

> Co do ikon to raczej stosuję tzw. htmlentities a nie obrazki (jpg, gif, svg czy inne).

Ja też nie używam grafik w podanym przykładzie.

--
pozdrawiam
Roman Tyczka
0 new messages