html - 排列长的 Href 名称

标签 html css href

美好的一天, 我创建了 3 个 href 链接。但是 href 的名称很长。我怎样才能重新排列它们,使它们出现在三列中?我尝试使用/br 但它使我的链接垂直。我需要它们是水平的。例如,

销售

每周评估

产生的销售额

直接来自 NOVA。

后面是它旁边的其他两个链接。这是在 html 中:

<div class="bbar">
            <a href="sales.html">Sales - Weekly assessment on sales generated directly from NOVA.&nbsp;</a>
            <a href="cust.html">Customer Service Charter - Weekly assessment on how we serve our customers.&nbsp;</a>
            <a href="collection.html">Collection - Weekly assessment on collection.</a>
        </div>

这是在 .css 中

div.bbar
{
bottom : 15%;
left : 5%;
right : 5%;
color : black;
font-family : calibri;
font-size : 16px;
text-align : center;
padding : 5px;
position : absolute;
}

最佳答案

这是您的解决方案 -- 3 列。在 jsFiddle

HTML

<div class="bbar">
            <a href="sales.html">Sales - Weekly assessment on sales generated directly from NOVA.&nbsp;</a>
            <a href="cust.html">Customer Service Charter - Weekly assessment on how we serve our customers.&nbsp;</a>
            <a href="collection.html">Collection - Weekly assessment on collection.</a>
        </div>
   <div style="clear: both;"></div>

CSS

div.bbar
{
bottom : 15%;
left : 5%;
right : 5%;
color : black;
font-family : calibri;
font-size : 16px;
text-align : center;
padding : 5px;
position : absolute;
}

div.bbar a {
  width: 32%;
  display: inline;
  text-align: justify;
  float: left;
  padding: 5px;
}

关于html - 排列长的 Href 名称,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23055209/

相关文章:

css - 使用 Vue 和 Flexbox 的响应式表格

PHP页面加载/刷新到准确位置

javascript - 如何使用 clipboard.js 获取 href 属性?

html - <a href ="..."/> 的绝对路径是如何确定的?

JavaScript 更改文本上的 div 类

jquery - 悬停到已经悬停的元素的目标

javascript - 当前幻灯片 + 导航

javascript - 在特定滚动位置隐藏/显示内容

php - 添加带有日期字段的动态行 jQuery

javascript - 使用 JavaScript 使背景图像在滚动时始终保持不变(加上其他查询)