How to justify anchor tag in a div

Question

I am trying to justify links but its not working when have few links in a div.

div#locs_list>div {
  text-align: justify;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

<div class="tags-box" id="locs_list">
  <h4 class="lab_title"><a href="" title="" class="no_atag_title">Westchester County</a></h4>
  <div><a class="loc_aList" href="" title="Ardsley">ardsley</a><a class="loc_aList" href="" title="Armonk">armonk</a><a class="loc_aList" href="" title="Bedford">bedford</a><a class="loc_aList" href="" title="Briarcliff Manor">briarcliff manor</a><a class="loc_aList"
      href="" title="Bronxville">bronxville</a><a class="loc_aList" href="" title="Chappaqua">chappaqua</a><a class="loc_aList" href="" title="Dobbs Ferry">dobbs ferry</a><a class="loc_aList" href="" title="Eastchester">eastchester</a><a class="loc_aList"
      href="" title="Elmsford">elmsford</a><a class="loc_aList" href="" title="Harrison">harrison</a><a class="loc_aList" href="" title="Hartsdale">hartsdale</a><a class="loc_aList" href="" title="Hastings-on-hudson">hastings-on-hudson</a><a class="loc_aList"
      href="" title="Hawthorne">hawthorne</a><a class="loc_aList" href="" title="Irvington">irvington</a><a class="loc_aList" href="" title="Larchmont">larchmont</a><a class="loc_aList" href="" title="Mamaroneck">mamaroneck</a><a class="loc_aList" href=""
      title="Mount Kisco">mount kisco</a><a class="loc_aList" href="" title="Mount Vernon">mount vernon</a><a class="loc_aList" href="" title="New Rochelle">new rochelle</a><a class="loc_aList" href="" title="Pelham">pelham</a><a class="loc_aList" href=""
      title="Pleasantville">pleasantville</a><a class="loc_aList" href="" title="Port Chester">port chester</a><a class="loc_aList" href="" title="Purchase">purchase</a><a class="loc_aList" href="" title="Rye">rye</a><a class="loc_aList" href="" title="Scarsdale">scarsdale</a>
    <a
      class="loc_aList" href="" title="Sleepy Hollow">sleepy hollow</a><a class="loc_aList" href="" title="Tarrytown">tarrytown</a><a class="loc_aList" href="" title="Thornwood">thornwood</a><a class="loc_aList" href="" title="Tuckahoe">tuckahoe</a><a class="loc_aList" href="" title="Valhalla">valhalla</a>
      <a
        class="loc_aList" href="" title="White Plains">white plains</a><a class="loc_aList" href="" title="Yonkers">yonkers</a></div>
  <h4 class="lab_title"><a href="" title="" class="no_atag_title">Fairfield County</a></h4>
  <div><a class="loc_aList" href="" title="Darien">darien</a><a class="loc_aList" href="" title="Greenwich">greenwich</a><a class="loc_aList" href="" title="Norwalk">norwalk</a><a class="loc_aList" href="" title="Stamford">stamford</a></div>
</div>

Output

You can see that "Westchester County" links are justified but Fairfield County are not.

IF less content then it should look like this

I would expect the output to look exactly like the first image. Why would it suddenly become narrower than the div? Where do you define "less content should not be spaced out" ? — mplungjan, Jul 22 '20 at 12:48
You do realize that what your example shows has _nothing_ to do with `text-align: justify`, and everything with flexbox - no? — CBroe, Jul 22 '20 at 12:55
… which makes your question, as it is right now, pretty much a duplicate of https://stackoverflow.com/questions/40936543/left-align-last-row-of-flexbox-using-space-between-and-margins, I think. — CBroe, Jul 22 '20 at 12:56

score 2 · Accepted Answer · answered Jul 22 '20 at 12:58

text-align: justify; doesn't work for the anchors. The way I see it is to use flexbox and set the last anchor to have margin-right: auto. Also, set each anchor to have default margin.

div#locs_list>div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#locs_list a {
  display: inline-block;
  margin-right: 5px;
}
#locs_list a:last-child {
  margin-right: auto;
}

<div class="tags-box" id="locs_list">
  <h4 class="lab_title"><a href="" title="" class="no_atag_title">Westchester County</a></h4>
  <div><a class="loc_aList" href="" title="Ardsley">ardsley</a><a class="loc_aList" href="" title="Armonk">armonk</a><a class="loc_aList" href="" title="Bedford">bedford</a><a class="loc_aList" href="" title="Briarcliff Manor">briarcliff manor</a><a class="loc_aList"
      href="" title="Bronxville">bronxville</a><a class="loc_aList" href="" title="Chappaqua">chappaqua</a><a class="loc_aList" href="" title="Dobbs Ferry">dobbs ferry</a><a class="loc_aList" href="" title="Eastchester">eastchester</a><a class="loc_aList"
      href="" title="Elmsford">elmsford</a><a class="loc_aList" href="" title="Harrison">harrison</a><a class="loc_aList" href="" title="Hartsdale">hartsdale</a><a class="loc_aList" href="" title="Hastings-on-hudson">hastings-on-hudson</a><a class="loc_aList"
      href="" title="Hawthorne">hawthorne</a><a class="loc_aList" href="" title="Irvington">irvington</a><a class="loc_aList" href="" title="Larchmont">larchmont</a><a class="loc_aList" href="" title="Mamaroneck">mamaroneck</a><a class="loc_aList" href=""
      title="Mount Kisco">mount kisco</a><a class="loc_aList" href="" title="Mount Vernon">mount vernon</a><a class="loc_aList" href="" title="New Rochelle">new rochelle</a><a class="loc_aList" href="" title="Pelham">pelham</a><a class="loc_aList" href=""
      title="Pleasantville">pleasantville</a><a class="loc_aList" href="" title="Port Chester">port chester</a><a class="loc_aList" href="" title="Purchase">purchase</a><a class="loc_aList" href="" title="Rye">rye</a><a class="loc_aList" href="" title="Scarsdale">scarsdale</a>
    <a
      class="loc_aList" href="" title="Sleepy Hollow">sleepy hollow</a><a class="loc_aList" href="" title="Tarrytown">tarrytown</a><a class="loc_aList" href="" title="Thornwood">thornwood</a><a class="loc_aList" href="" title="Tuckahoe">tuckahoe</a><a class="loc_aList" href="" title="Valhalla">valhalla</a>
      <a
        class="loc_aList" href="" title="White Plains">white plains</a><a class="loc_aList" href="" title="Yonkers">yonkers</a></div>
  <h4 class="lab_title"><a href="" title="" class="no_atag_title">Fairfield County</a></h4>
  <div><a class="loc_aList" href="" title="Darien">darien</a><a class="loc_aList" href="" title="Greenwich">greenwich</a><a class="loc_aList" href="" title="Norwalk">norwalk</a><a class="loc_aList" href="" title="Stamford">stamford</a></div>
</div>

score 0 · Answer 2 · edited Aug 04 '20 at 22:27

You should use justify with the 'a' tag not with div.

#locs_list p {
  text-align: justify;
}

<div class="tags-box" id="locs_list">
  <h4 class="lab_title"><a href="" title="" class="no_atag_title">Westchester County</a></h4>
  <div>
<p><a class="loc_aList" href="" title="Ardsley">ardsley</a><a class="loc_aList" href="" title="Armonk">armonk</a><a class="loc_aList" href="" title="Bedford">bedford</a><a class="loc_aList" href="" title="Briarcliff Manor">briarcliff manor</a><a class="loc_aList"
      href="" title="Bronxville">bronxville</a><a class="loc_aList" href="" title="Chappaqua">chappaqua</a><a class="loc_aList" href="" title="Dobbs Ferry">dobbs ferry</a><a class="loc_aList" href="" title="Eastchester">eastchester</a><a class="loc_aList"
      href="" title="Elmsford">elmsford</a><a class="loc_aList" href="" title="Harrison">harrison</a><a class="loc_aList" href="" title="Hartsdale">hartsdale</a><a class="loc_aList" href="" title="Hastings-on-hudson">hastings-on-hudson</a><a class="loc_aList"
      href="" title="Hawthorne">hawthorne</a><a class="loc_aList" href="" title="Irvington">irvington</a><a class="loc_aList" href="" title="Larchmont">larchmont</a><a class="loc_aList" href="" title="Mamaroneck">mamaroneck</a><a class="loc_aList" href=""
      title="Mount Kisco">mount kisco</a><a class="loc_aList" href="" title="Mount Vernon">mount vernon</a><a class="loc_aList" href="" title="New Rochelle">new rochelle</a><a class="loc_aList" href="" title="Pelham">pelham</a><a class="loc_aList" href=""
      title="Pleasantville">pleasantville</a><a class="loc_aList" href="" title="Port Chester">port chester</a><a class="loc_aList" href="" title="Purchase">purchase</a><a class="loc_aList" href="" title="Rye">rye</a><a class="loc_aList" href="" title="Scarsdale">scarsdale</a>
    <a class="loc_aList" href="" title="Sleepy Hollow">sleepy hollow</a><a class="loc_aList" href="" title="Tarrytown">tarrytown</a><a class="loc_aList" href="" title="Thornwood">thornwood</a><a class="loc_aList" href="" title="Tuckahoe">tuckahoe</a>
    <a
      class="loc_aList" href="" title="Valhalla">valhalla</a>
      <a class="loc_aList" href="" title="White Plains">white plains</a><a class="loc_aList" href="" title="Yonkers">yonkers</a></div>
  <h4 class="lab_title"><a href="" title="" class="no_atag_title">Fairfield County</a></h4>
  <div><a class="loc_aList" href="" title="Darien">darien</a><a class="loc_aList" href="" title="Greenwich">greenwich</a><a class="loc_aList" href="" title="Norwalk">norwalk</a><a class="loc_aList" href="" title="Stamford">stamford</a>
</p></div>
</div>

That does nothing. Please test before answering. See the snippet you could have made — mplungjan, Jul 22 '20 at 12:53

How to justify anchor tag in a div

2 Answers2