Hey, I'd like to know something. is display: inline-block; better than float: left; for navigation links? I've seen that you can use either of them, but I'm not sure which one is the best option when creating a navigation bar.
If you float an element, it becomes a block. If you use float: left, it would be redundant to also make it a block. Floating an element allows it to display around other elements on the page. inline-block creates something similar to a row of a table. Depending on how you set things up, either can work. There's no perfect solution. It ultimately depends on what you're trying to implement. EDIT: This question has been asked and answered more than once on stackoverflow. I'd encourage you to check out those answers to see which method would work best for you. https://stackoverflow.com/questions...-block-float-left-vs-display-inline-block-flo https://stackoverflow.com/questions...e-vs-displayinline-block-vs-displaytable-cell You can google you question to find other answers on stackoverflow and other sites.
By default, many fields like div and etc are treated as a "display: block" which means they take up the entire line. "display: inner-block" pretty much tells it to treat it like text, aka share the line with other content. "float: left" just tells it where to position itself within the block. So your question isn't really comparable as you are looking at completely different things. If you want something to hug the edges, that is what float does (it differs from text-align in that you can have multiple in the same block). If you want it to go sequential, that is inner-block.
Don't you have to ask for something entirely new, else it will be marked as duplicate and not answered? I'd browse it, but as for the place for asking questions, I don't think it's the right place.
I can't speak for what Jojo meant. I will say, however, that in less time than it took for the OP to make this thread, they could have googled their question and had an answer. I'll second your point, though. Just about every question you can think of has already been asked on stackoverflow. Posting a question at this point is just met with bitching and links to already answered questions.
I'll do a detailed explanation next time, but inlineblock is better in terms of run times, expecially if the site is reactive. But honestly it doesn't matter. There are some slight differences when you do a complicated stuff. With tons of paddings margins, virtual Dom and all those shits. If your asking this questions, chances are it won't matters to you. If float and inlineblock can achieve the same effect that you want to apply, you should use inlineblock most of times. For your case, Inlineblock obviously, I'll reserve this layer......... For future documentations or examples.
Better take the bitching and get that link to already answered question if you have been lazy or silly enough not to find it yourself.
The OP didn't provide enough context for anyone to know if the two would achieve the same result. We have no idea how he's trying to optimize it, nor for what resolutions or devices. Sometimes inline-block can be better since it has so many table-like properties. That doesn't mean that it's always better. Inline-block can get cut off at the end of a frame or cause an awkward horizontal scroll if the nav bar is too long. Float will usually wrap to the next line, which is still awkward, but it's better than losing part of the bar. Without more context, it's not possible to say which option is better. It's not hard to implement either option. The best advice is for the OP to try them both and see which works best.
His last sentence makes me believe he's asking the best way to create an entire navigation bar, not just individual elements. Again, without more context, the only advice I can give is to try both methods and see which one works best. The <nav> tag does very little on its own. The tag exists largely for screen readers so blind or visually impaired people can skip the nav links or jump to them. You need to use css to do much with it.
@Jeebus not sure about how you do it, but personally I use make header nav with this. Edit: there is some minor mistakes of screen shot when it was taken, all the ID of <li> are the same ... copy and paste lazy lol. HTML: <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <style> #header-container { margin-top: 0; line-height: 1.15; margin-left: auto; } nav{ display: block; } ul.nav { display: block; list-style-type: none; } li.nav { display: inline-block; } div#header-items { /* margin-left: auto; margin-right: auto; */ } </style> </head> <body> <div id="header-container"> <nav> <div id="heder-items"> <ul id="header-menu" class="nav" style="list-style-type:none"> <li id="header-nemu-item1" class="nav"> <a href="http://localhost:8000/">home</a> </li> <li id="header-nemu-item2" class="nav"> <a href="http://localhost:8000/">privicy</a> </li> <li id="header-nemu-item3" class="nav"> <a href="http://localhost:8000/">about</a> </li> <li id="header-nemu-item4" class="nav"> <a href="http://localhost:8000/">contact</a> </li> </ul> <div> </nav> </div> </body> </html> There are some parts need polishing but i think this is how it's written mostly. I don't use basic HTML all that often lol.