Why does flexbox container split list items in two lines?
0
I have a flex element <header> which contains two flex items: <span> and <ul>
My goal is to display flex items horizontally in one line like in this photo:
but the result which I get is:
I have figured out that my problem may be solved by using flex-basis: 100%; But the behaviour of the flexbox container is not understandable for me.
Why does it split <li> items in two lines instead of displaying them in one?
html:
<header>
<span>LOGO</span>
<ul>
<li>Library</li>
<li>Telegram channel</li>
<li>Contacts</li>
<li>Donate</li>
</ul>
</header>
css:
span {
border: 1px solid black;
margin-right: 10px;
}
ul {
padding: 10px;
}
li {
display: inline-block;
padding: 0 5%;
border: 1px solid black;
}
header {
display: flex;
align-items: center;
}
html css flexbox
asked Nov 28 '18 at 21:26
Roman RomanRoman Roman
37612
add a comment |
0
I have a flex element <header> which contains two flex items: <span> and <ul>
My goal is to display flex items horizontally in one line like in this photo:
but the result which I get is:
I have figured out that my problem may be solved by using flex-basis: 100%; But the behaviour of the flexbox container is not understandable for me.
Why does it split <li> items in two lines instead of displaying them in one?
html:
<header>
<span>LOGO</span>
<ul>
<li>Library</li>
<li>Telegram channel</li>
<li>Contacts</li>
<li>Donate</li>
</ul>
</header>
css:
span {
border: 1px solid black;
margin-right: 10px;
}
ul {
padding: 10px;
}
li {
display: inline-block;
padding: 0 5%;
border: 1px solid black;
}
header {
display: flex;
align-items: center;
}
html css flexbox
asked Nov 28 '18 at 21:26
Roman RomanRoman Roman
37612
You're applying flexbox to your header element so every children will be next to each other as expected. The ul splits in two lines because of the inline-block rule on your li element and it takes the available space of the ul, if you want it to be horizontal set a width: 100% in your ul
– Julian Espinosa
Nov 28 '18 at 21:36
1
@JulianEspinosa but the default width of <ul> element is 100%. Why do we need to set it again?
– Roman Roman
Nov 28 '18 at 21:46
add a comment |
0
0
0
1
I have a flex element <header> which contains two flex items: <span> and <ul>
My goal is to display flex items horizontally in one line like in this photo:
but the result which I get is:
I have figured out that my problem may be solved by using flex-basis: 100%; But the behaviour of the flexbox container is not understandable for me.
Why does it split <li> items in two lines instead of displaying them in one?
html:
<header>
<span>LOGO</span>
<ul>
<li>Library</li>
<li>Telegram channel</li>
<li>Contacts</li>
<li>Donate</li>
</ul>
</header>
css:
span {
border: 1px solid black;
margin-right: 10px;
}
ul {
padding: 10px;
}
li {
display: inline-block;
padding: 0 5%;
border: 1px solid black;
}
header {
display: flex;
align-items: center;
}
html css flexbox
asked Nov 28 '18 at 21:26
Roman RomanRoman Roman
37612
I have a flex element <header> which contains two flex items: <span> and <ul>
My goal is to display flex items horizontally in one line like in this photo:
but the result which I get is:
I have figured out that my problem may be solved by using flex-basis: 100%; But the behaviour of the flexbox container is not understandable for me.
Why does it split <li> items in two lines instead of displaying them in one?
html:
<header>
<span>LOGO</span>
<ul>
<li>Library</li>
<li>Telegram channel</li>
<li>Contacts</li>
<li>Donate</li>
</ul>
</header>
css:
span {
border: 1px solid black;
margin-right: 10px;
}
ul {
padding: 10px;
}
li {
display: inline-block;
padding: 0 5%;
border: 1px solid black;
}
header {
display: flex;
align-items: center;
}
html css flexbox
html css flexbox
asked Nov 28 '18 at 21:26
Roman RomanRoman Roman
37612
asked Nov 28 '18 at 21:26
Roman RomanRoman Roman
37612
asked Nov 28 '18 at 21:26
Roman RomanRoman Roman
37612
asked Nov 28 '18 at 21:26
Roman RomanRoman Roman
37612
asked Nov 28 '18 at 21:26
Roman RomanRoman Roman
37612
37612
You're applying flexbox to your header element so every children will be next to each other as expected. The ul splits in two lines because of the inline-block rule on your li element and it takes the available space of the ul, if you want it to be horizontal set a width: 100% in your ul
– Julian Espinosa
Nov 28 '18 at 21:36
1
@JulianEspinosa but the default width of <ul> element is 100%. Why do we need to set it again?
– Roman Roman
Nov 28 '18 at 21:46
add a comment |
You're applying flexbox to your header element so every children will be next to each other as expected. The ul splits in two lines because of the inline-block rule on your li element and it takes the available space of the ul, if you want it to be horizontal set a width: 100% in your ul
– Julian Espinosa
Nov 28 '18 at 21:36
1
@JulianEspinosa but the default width of <ul> element is 100%. Why do we need to set it again?
– Roman Roman
Nov 28 '18 at 21:46
You're applying flexbox to your header element so every children will be next to each other as expected. The ul splits in two lines because of the inline-block rule on your li element and it takes the available space of the ul, if you want it to be horizontal set a width: 100% in your ul
– Julian Espinosa
Nov 28 '18 at 21:36
You're applying flexbox to your header element so every children will be next to each other as expected. The ul splits in two lines because of the inline-block rule on your li element and it takes the available space of the ul, if you want it to be horizontal set a width: 100% in your ul
– Julian Espinosa
Nov 28 '18 at 21:36
1
1
@JulianEspinosa but the default width of <ul> element is 100%. Why do we need to set it again?
– Roman Roman
Nov 28 '18 at 21:46
@JulianEspinosa but the default width of <ul> element is 100%. Why do we need to set it again?
– Roman Roman
Nov 28 '18 at 21:46
add a comment |
1 Answer
1
active
oldest
votes
0
use width:100% and margin:0 for ul
span {
border: 1px solid black;
margin-right: 10px;
}
ul {
padding: 10px;
margin:0;
width:100%;
}
li {
display: inline-block;
padding: 0 5%;
border: 1px solid black;
}
header {
display: flex;
align-items: center;
}<header>
<span>LOGO</span>
<ul>
<li>Library</li>
<li>Telegram channel</li>
<li>Contacts</li>
<li>Donate</li>
</ul>
</header>answered Nov 28 '18 at 21:30
dgkncadgknca
4,45041028
1
Hi. Thanks for the solution. But my question is a bit different
– Roman Roman
Nov 28 '18 at 21:39
add a comment |
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53528363%2fwhy-does-flexbox-container-split-list-items-in-two-lines%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
use width:100% and margin:0 for ul
span {
border: 1px solid black;
margin-right: 10px;
}
ul {
padding: 10px;
margin:0;
width:100%;
}
li {
display: inline-block;
padding: 0 5%;
border: 1px solid black;
}
header {
display: flex;
align-items: center;
}<header>
<span>LOGO</span>
<ul>
<li>Library</li>
<li>Telegram channel</li>
<li>Contacts</li>
<li>Donate</li>
</ul>
</header>answered Nov 28 '18 at 21:30
dgkncadgknca
4,45041028
1
Hi. Thanks for the solution. But my question is a bit different
– Roman Roman
Nov 28 '18 at 21:39
add a comment |
0
use width:100% and margin:0 for ul
span {
border: 1px solid black;
margin-right: 10px;
}
ul {
padding: 10px;
margin:0;
width:100%;
}
li {
display: inline-block;
padding: 0 5%;
border: 1px solid black;
}
header {
display: flex;
align-items: center;
}<header>
<span>LOGO</span>
<ul>
<li>Library</li>
<li>Telegram channel</li>
<li>Contacts</li>
<li>Donate</li>
</ul>
</header>answered Nov 28 '18 at 21:30
dgkncadgknca
4,45041028
1
Hi. Thanks for the solution. But my question is a bit different
– Roman Roman
Nov 28 '18 at 21:39
add a comment |
0
0
0
use width:100% and margin:0 for ul
span {
border: 1px solid black;
margin-right: 10px;
}
ul {
padding: 10px;
margin:0;
width:100%;
}
li {
display: inline-block;
padding: 0 5%;
border: 1px solid black;
}
header {
display: flex;
align-items: center;
}<header>
<span>LOGO</span>
<ul>
<li>Library</li>
<li>Telegram channel</li>
<li>Contacts</li>
<li>Donate</li>
</ul>
</header>answered Nov 28 '18 at 21:30
dgkncadgknca
4,45041028
use width:100% and margin:0 for ul
span {
border: 1px solid black;
margin-right: 10px;
}
ul {
padding: 10px;
margin:0;
width:100%;
}
li {
display: inline-block;
padding: 0 5%;
border: 1px solid black;
}
header {
display: flex;
align-items: center;
}<header>
<span>LOGO</span>
<ul>
<li>Library</li>
<li>Telegram channel</li>
<li>Contacts</li>
<li>Donate</li>
</ul>
</header>span {
border: 1px solid black;
margin-right: 10px;
}
ul {
padding: 10px;
margin:0;
width:100%;
}
li {
display: inline-block;
padding: 0 5%;
border: 1px solid black;
}
header {
display: flex;
align-items: center;
}<header>
<span>LOGO</span>
<ul>
<li>Library</li>
<li>Telegram channel</li>
<li>Contacts</li>
<li>Donate</li>
</ul>
</header>span {
border: 1px solid black;
margin-right: 10px;
}
ul {
padding: 10px;
margin:0;
width:100%;
}
li {
display: inline-block;
padding: 0 5%;
border: 1px solid black;
}
header {
display: flex;
align-items: center;
}<header>
<span>LOGO</span>
<ul>
<li>Library</li>
<li>Telegram channel</li>
<li>Contacts</li>
<li>Donate</li>
</ul>
</header>answered Nov 28 '18 at 21:30
dgkncadgknca
4,45041028
answered Nov 28 '18 at 21:30
dgkncadgknca
4,45041028
answered Nov 28 '18 at 21:30
dgkncadgknca
4,45041028
answered Nov 28 '18 at 21:30
dgkncadgknca
4,45041028
4,45041028
1
Hi. Thanks for the solution. But my question is a bit different
– Roman Roman
Nov 28 '18 at 21:39
add a comment |
1
Hi. Thanks for the solution. But my question is a bit different
– Roman Roman
Nov 28 '18 at 21:39
1
1
Hi. Thanks for the solution. But my question is a bit different
– Roman Roman
Nov 28 '18 at 21:39
Hi. Thanks for the solution. But my question is a bit different
– Roman Roman
Nov 28 '18 at 21:39
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53528363%2fwhy-does-flexbox-container-split-list-items-in-two-lines%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
You're applying flexbox to your header element so every children will be next to each other as expected. The ul splits in two lines because of the inline-block rule on your li element and it takes the available space of the ul, if you want it to be horizontal set a width: 100% in your ul
– Julian Espinosa
Nov 28 '18 at 21:36
1
@JulianEspinosa but the default width of <ul> element is 100%. Why do we need to set it again?
– Roman Roman
Nov 28 '18 at 21:46