安排长Href名称

时间:2014-04-14 08:18:40

标签: 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 个答案:

答案 0 :(得分:0)

制作a&#39; inline-block,并给它们一个宽度,使它们显示在彼此旁边: http://jsfiddle.net/NJmnz/5/

.bbar a {
  display:inline-block;
  width: 32%;
  vertical-align: top; 
}

答案 1 :(得分:0)

这是您的解决方案 - 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;
}

答案 2 :(得分:0)

你需要添加

.bbar  a {
    float: left;
}