代码之家 › 专栏 › 技术社区 › Yogesh Saroya

如何在div中对齐锚定标记

css html

Yogesh Saroya · 技术社区 · 4 年前

我试图证明链接的合理性,但当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>

输出

您可以看到,“Westchester County”链接是合理的,但Fairfield County没有。

如果内容较少,则应如下所示

0 回复 | 直到 4 年前

framelita 4 年前

text-align: justify; 锚不起作用。我的看法是使用flexbox并设置最后一个锚点 margin-right: auto 。此外,将每个锚点设置为具有默认边距。

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>

halfer 4 年前

您应该将justify与'a'标记一起使用,而不是与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>