gpt4 book ai didi

html - 如何根据单词的长度在单词之间创建等距空间?

转载 作者:太空宇宙 更新时间:2023-11-04 06:32:49 24 4
gpt4 key购买 nike

假设我有一个水平列表:

关于招生学术研究新闻事件

我希望它们根据它们的长度与前一个词分开 n 个单位。


|关于 |招生 |学者 |研究 |新闻 |事件 |

上面的插图基本上是我问题的核心。如何使单词彼此等距?如何改变矩形的面积以创建等距?

例如,“Research”的面积比“News”大得多,但它们的距离与“About”和“Admissions”以及“Admissions”和“Academics”等词的距离相同。

 .school_info {
background-color: black;
text-align: center;
}

.school_info_row {
margin: 0 10% 0 10%;
width: auto;
padding-bottom: 15px;
}

.public_info_container {
padding-left: 0;
padding-right: 0;
}

.public_info {
font-size: 20;
font-family:'Cinzel', serif;
color: white;
width: 150px;
}
<div class="school_info">
<div class="row school_info_row">
<div class="col-lg-2 col-md-4 public_info_container">
<a class="public_info" href="">About</a>
</div>
<div class="col-lg-2 col-md-4 public_info_container">
<a class="public_info" href="">Admissions</a>
</div>
<div class="col-lg-2 col-md-4 public_info_container">
<a class="public_info" href="">Academics</a>
</div>
<div class="col-lg-2 col-md-4 public_info_container">
<a class="public_info" href="">Research</a>
</div>
<div class="col-lg-2 col-md-4 public_info_container">
<a class="public_info" href="">News</a>
</div>
<div class="col-lg-2 col-md-4 public_info_container">
<a class="public_info" href="">Events</a>
</div>
</div>
</div>
</div>

最佳答案

你几乎明白了。 Bootstrap 列总数必须加起来为 12。您的 col-lg-x 是正确的,它加起来为 12,您的 col-md-x 需要有值 2 也是如此。由于 lgmd 媒体断点都使用值 2,您可以将其替换为 col-2 .我假设这是 Bootstrap ,因为那些是 Bootstrap 类。 Bootstrap 还具有 mx-auto 类,因此您可以使 x 轴上的边距等距。

.school_info {
background-color: black;
text-align: center;
}


.public_info {
font-size: 20;
font-family:'Cinzel', serif;
color: white;
/*width: 150px;*/
}

.hilite {
border-left: 1px solid red;
border-right: 1px solid red;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="school_info">
<div class="row">
<div class="col-2 hilite">
<a class="public_info mx-auto" href="">About</a>
</div>
<div class="col-2 hilite">
<a class="public_info mx-auto" href="">Admissions</a>
</div>
<div class="col-2 hilite">
<a class="public_info mx-auto" href="">Academics</a>
</div>
<div class="col-2 hilite">
<a class="public_info mx-auto" href="">Research</a>
</div>
<div class="col-2 hilite">
<a class="public_info mx-auto" href="">News</a>
</div>
<div class="col-2 hilite">
<a class="public_info mx-auto" href="">Events</a>
</div>
</div>
</div>
</div>

关于html - 如何根据单词的长度在单词之间创建等距空间?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54488632/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com