CODEWITHSUNDEEP
htmlcss
Goutam B Seervi
Goutam B Seervi

Reputation: 1226

HTML CSS Align items of a div inline

I have the following html code:

  <div class="transparent" style="display: inline; text-align: justify; height: 80px;">
    <a style="padding: 4px">About Cilliai</a>
    <a style="padding: 4px">Advertise</a>
    <a style="padding: 4px">Signage Manager</a>
    <a style="padding: 4px">Signage Solutions</a>
    <a style="padding: 4px">Career</a>
    <a style="padding: 4px">Resources</a>
    <a style="padding: 4px">Contact</a>
    <a style="padding: 4px">Legal</a>
</div>

which gives the following output output

Everything looks as expected but the I want the text signage solutions to be in the same line and shift legal to the next line. How do I accomplish that?

Upvotes: 1

Views: 117

Answers (6)

Nethra
Nethra

Reputation: 609

.transparent
{
  display:flex;
  flex-wrap: wrap;
  width:40%;
  margin: 0 auto;

}
<div class="transparent">
    <a style="padding: 4px">About Cilliai</a>
    <a style="padding: 4px">Advertise</a>
    <a style="padding: 4px">Signage Manager</a>
    <a style="padding: 4px">Signage Solutions</a>
    <a style="padding: 4px">Career</a>
    <a style="padding: 4px">Resources</a>
    <a style="padding: 4px">Contact</a>
    <a style="padding: 4px">Legal</a>
</div>

Upvotes: 0

Jon P
Jon P

Reputation: 19772

To the text of an a element on the same line add white-space: nowrap;

Demo:

.transparent a {
  white-space: nowrap;
  border-left: solid 1px black;
  border-right: solid 1px black;
}
<div style="max-width:400px"><!-- Purely to demonstrate wrap-->  
  <div class="transparent" style="display: inline; text-align: justify; height: 80px;">
    <a style="padding: 4px">About Cilliai</a>
    <a style="padding: 4px">Advertise</a>
    <a style="padding: 4px">Signage Manager</a>
    <a style="padding: 4px">Signage Solutions</a>
    <a style="padding: 4px">Career</a>
    <a style="padding: 4px">Resources</a>
    <a style="padding: 4px">Contact</a>
    <a style="padding: 4px">Legal</a>
  </div>
</div>

Upvotes: 0

Akhi Akl
Akhi Akl

Reputation: 3931

Use display flex instead of display inline.

display: flex;
height: 80px;
flex-wrap: wrap;

Upvotes: 1

betchern0t
betchern0t

Reputation: 73

you could possible add clear: right to the last one this would allow you to achieve this outside of the normal text flow.

div a {
  float:left;
}

    <a style="padding: 4px">About Cilliai</a>
    <a style="padding: 4px">Advertise</a>
    <a style="padding: 4px">Signage Manager</a>
    <a style="clear: right; padding: 4px">Signage Solutions</a> 
    <a style="padding: 4px">Career</a>
    <a style="padding: 4px">Resources</a>
    <a style="padding: 4px">Contact</a>
    <a style="clear:both; padding: 4px">Legal</a>
</div>

You will probably have to fiddle with the clear setting - left right or both to get it exactly right and perhaps also the order of your anchors

Upvotes: 1

Raymond Hani Artin
Raymond Hani Artin

Reputation: 35

use </br>this will add a new line break. If not try adding to the <div style="width:100% " or width:200px use the width to give space to the div in order to get the text beside each other. if the width is low the text will automatically get in a new line

Upvotes: 0

Loi Nguyen Huynh
Loi Nguyen Huynh

Reputation: 9928

Maybe you want some <br>?

How about word-wrap and overflow-wrap ?

div a {
  word-spacing: 8px;
}
<div class="transparent" style="display: inline; text-align: justify; height: 80px;">
    <a style="padding: 4px">About Cilliai</a>
    <a style="padding: 4px">Advertise</a> <br>
    <a style="padding: 4px">Signage Manager</a>
    <a style="padding: 4px">Signage Solutions</a> <br>
    <a style="padding: 4px">Career</a>
    <a style="padding: 4px">Resources</a>
    <a style="padding: 4px">Contact</a> <br>
    <a style="padding: 4px">Legal</a>
</div>

Upvotes: 0

Related Questions