2

I have below html and css to display some data as per screenshot. If I add white-space: nowrap; Then text moves out of the box (the first screenshot). If I don't use then it wraps but disturbs the box alignment(2nd row in screenshot).

Any property I can set to fix this without increasing box width? I have tried display property as well but no luck so far.

<html> <head> <meta charset="UTF-8"/> <style> .sideBarList li { width: 12%; height: 50px; text-align: center; line-height: -10px; border-radius: 10px; background: skyblue; margin: 0 10px; white-space: nowrap; display: inline-block; color: black; position: relative; text-align: center; font-family: Arial; font-size: 11px; } .sideBarList li::before{ content: ''; position: absolute; top: 25px; left: -8em; width: 8em; height: .2em; background: skyblue; z-index: -1; } </style> </head> <body> <ul class="sideBarList"> <li class="li">Hi There</li> <li class="li">Hi There</li> <li class="li"> ABC DEF GHI TYTYT YTYYT IIIOO</li> </ul> </body> </html>
Improve this question
0

4 Answers 4

Reset to default
1

You are using inline-block, you need to use vertical-align:top to maintain alignment as the default alignment is baseline.

.sideBarList li { width: 12%; height: 50px; text-align: center; line-height: -10px; border-radius: 10px; background: skyblue; margin: 0 10px; display: inline-block; vertical-align: top; color: black; position: relative; text-align: center; font-family: Arial; font-size: 11px; } .sideBarList li::before { content: ''; position: absolute; top: 25px; left: -8em; width: 8em; height: .2em; background: skyblue; z-index: -1; }
<ul class="sideBarList"> <li class="li">Hi There</li> <li class="li">Hi There</li> <li class="li"> ABC DEF GHI TYTYT YTYYT IIIOO</li> </ul>

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Thanks Paulie! I have marked the answer. Would you mind helping me with one small query? I have to display some text over connector lines. Any idea how can add text font, size css for that? If I add any tag it goes to next line. <li class="li">Hi There</li>CDE <li class="li">Hi There</li>ABC <li class="li"> ABC DEF GHI TYTYT YTYYT IIIOO</li>
That's a whole other question. It will depend on what the text is intended to be and how it relates to the list items. Perhaps ask another question with an image of what it is you are trying to do.
1

only update your .sideBarList li to this

.sideBarList li { width: 12%; height: 50px; text-align: center; line-height: -10px; border-radius: 10px; background: skyblue; margin: 0 10px; display: inline-block; vertical-align: top; color: black; position: relative; text-align: center; font-family: Arial; font-size: 11px; }
Improve this answer

Comments

1

display:inline-flex also works. Please check.

.sideBarList li { width: 12%; height: 50px; text-align: center; line-height: -10px; border-radius: 10px; background: skyblue; margin: 0 10px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; vertical-align:top; color: black; position: relative; text-align: center; font-family: Arial; font-size: 11px; } .sideBarList li::before { content: ''; position: absolute; top: 25px; left: -8em; width: 8em; height: .2em; background: skyblue; z-index: -1; }
<ul class="sideBarList"> <li class="li">Hi There</li> <li class="li">Hi There</li> <li class="li"> ABC DEF GHI TYTYT YTYYT IIIOO</li> </ul>

Improve this answer

Comments

1

Use this style

ul { display: flex; } 

 .sideBarList li { width: 12%; height: 50px; text-align: center; line-height: -10px; border-radius: 10px; background: skyblue; margin: 0 10px; white-space: normal; display: inline-block; color: black; position: relative; text-align: center; font-family: Arial; font-size: 11px; } .sideBarList li::before{ content: ''; position: absolute; top: 25px; left: -8em; width: 8em; height: .2em; background: skyblue; z-index: -1; } ul { display: flex; }
<ul class="sideBarList"> <li class="li">Hi There</li> <li class="li">Hi There</li> <li class="li"> ABC DEF GHI TYTYT YTYYT IIIOO</li> </ul>

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.