Last post Sep 05, 2018 07:28 AM by PatriceSc
Aug 02, 2018 03:20 PM|QueenYe|LINK
Please check my code, i want to know why they are not in single line? My needs is explanation instead of alternative solutions.
Thanks in advance!
Aug 02, 2018 03:44 PM|vahid bakkhi|LINK
you have to use float , please try below code :
Aug 03, 2018 02:05 AM|QueenYe|LINK
I know the alternative solution like float and flex layout, but I am still curious about why they break new line? But i set the width of elements p, one is 40%, the other is 59%, it will occur in single line. But i check the element style in chrome, without
border and other, so this is my doubt.
Aug 07, 2018 02:20 AM|Nan Yu|LINK
The <p> tag is meant to represent a paragraph which is a block of text, thus the display mode is block. You can use display:inline to enable block-level elements to sit adjacent to one another . But if you don't want the text to start
on a new line, i would suggest not to use <p> tag. <span> might be a better solution .
Aug 08, 2018 02:51 AM|QueenYe|LINK
I know the substitute solutions, also I know could make them side by side when use display:inline, you should know we can not set the width of the line element, else my goal is want to know why it break line instead of replace solutions. Still wait solution.
Aug 08, 2018 05:19 AM|vahid bakkhi|LINK
did you try my code ?
Aug 10, 2018 03:50 AM|QueenYe|LINK
Sure, I have try your code, but if you checked the description of my needs, my requirement is want to know why instead of the repalce solutions!!!
Still waiting explanation!
Aug 10, 2018 03:44 PM|bruce (sqlwork.com)|LINK
<p> are display:block elements. unless a float or positioning command is not used, a block element takes a whole line, no matter the length. the alignment will control whether is left, right or center aligned in the line.
by contrast display:inline-block does not take a whole line if the width is under the containers width.
Aug 12, 2018 09:22 AM|QueenYe|LINK
My doubt is why two block elements(after set the display:inline-block) can not in single line when set the width of element one is 40%, the other is 60%?
The sum of width is 100%, the sum width is under the container width, why?
Sep 05, 2018 07:13 AM|Nan Yu|LINK
There is white space exists between inline-block elements , so that it can't fit the width to make in same line . You can remove the white space between inline-block elements by adding font-size:0px;
Then setting font size in child elements :
Sep 05, 2018 07:28 AM|PatriceSc|LINK
Seems you are looking originally for https://www.w3schools.com/htmL/html_blocks.asp
It is just that block elements are expected to start at a new line. This is why just changing the width is not enough and you have to do additional changes.