Question

请看这个页面：
http://www.technodoze.com
请参阅页面右侧类别中的按钮请参阅提示和技巧一词问题1：
它在整个栏目中得到了扩展问题是：我希望我的单元格根据文本字符串进行扩展，但看起来很尴尬问题2：
请参阅链接网页设计，其中一半位于另一条线的一半，我希望它在同一条线上。（一个<a>个链接，一行。）
我的代码：

<style type="text/css">
  .cat_link a, .cat_link a:hover, .cat_link a:focus{
  padding: 0.25em;
  color:#3B5998;
  font-family: Verdana;
  text-decoration: none;
  border:1px solid #DADADA;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  background: #EDEFF4;
  margin-left: 0;
  margin-right: 0;
  line-height:2;
  margin-top: 1em;
  margin-bottom: 1em;
}
  .cat_link {
  line-height:2;
}
</style>

HTML CODE：

<p class="cat_link">
  <a href="http://www.technodoze.com/search/label/Cell%20Phones">Cell Phones</a>
  <a href="http://www.technodoze.com/search/label/Android">Android</a>
  <a href="http://www.technodoze.com/search/label/Tips%20and%20Tricks">Tips and Tricks</a>
  <a href="http://www.technodoze.com/search/label/Amazing">Amazing</a>
  <a href="http://www.technodoze.com/search/label/Web%20Designing">Web Designing</a>
  <a href="http://www.technodoze.com/search/label/Windows%20Tips">Windows Tips</a>
  <a href="http://www.technodoze.com/search/label/Physics">Physics</a>
  <a href="http://www.technodoze.com/search/label/CSS">CSS</a>
  <a href="http://www.technodoze.com/search/label/CSS%203">CSS 3</a>
  <a href="http://www.technodoze.com/search/label/Communication">Communication</a>
  <a href="http://www.technodoze.com/search/label/Facebook%20tips">Facebook Tips</a>
  <a href="http://www.technodoze.com/search/label/Dajjal">Dajjal</a>
  <a href="http://www.technodoze.com/search/label/Bermuda%20Triangle">Bermuda Triangle</a>
</p>

如果可以，请给我解决方案。

Answer 1

您在页面正文上设置了text-align: justify;使用text-align: left为这些类别标记重置它，它将修复这个奇怪的间距。

为了确保文本不会像问题＃2中描述的那样换行，请在每个类别标签（选择器white-space: nowrap）上设置.cat_link a。

Answer 2

问题1：解决了text-align:left -

问题2：您可以在a元素中放置display:block;来强制换行，但如果文本大于容器，则会突破到新行。

Answer 3

将此添加到css类

.cat_link{
   text-align: left ;  /* gets rid of wierd white space */
}

.cat_link a{
    white-space: nowrap;   /*stops buttons from taking up two lines */
   }

CSS类别列表中的间距

3 个答案: