-1

请查看此页面：
http
://www.technodoze.com 查看页面右侧类别中的按钮。
请参阅“提示和技巧”一词。
问题1：
在整个列中展开。
问题是：我希望我的单元格仅根据文本字符串进行扩展，但看起来很尴尬。
问题 2：
查看链接 Web Designing，其中一半位于一条线上，另一条位于另一条线上，我希望它位于同一条线上。（一个<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 代码：

<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>

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

4

3 回答 3

0

您已text-align: justify在页面正文上设置；为这些类别标签重置它，text-align: left它将修复那个奇怪的间距。

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

于 2012-10-05T19:07:32.117 回答
0

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

问题2：可以display:block;在a元素中放入a来强制换行，但是如果文本比容器大的话就会换行。

于 2012-10-05T19:12:25.473 回答
0

将此添加到 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 */
   }
于 2012-10-05T19:12:37.360 回答