-1

このページをご覧ください:
http://www.technodoze.com
ページ の右側にあるカテゴリのボタンを参照してください。
ヒントとコツという言葉を参照してください。
問題 1:
列全体に展開されます。
問題は、テキスト文字列に従ってセルを拡張したいのですが、見栄えが悪いことです。
問題 2:
Web Designing のリンクを参照してください。半分が 1 つの行にあり、半分が別の行にあり、同じ行に配置したいです。(1 つの<a>リンク、1 つの行。)
マイ コード:

<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: atext-align:leftは解決されます-

問題 2: a 要素に a を入れてdisplay:block;改行を強制することはできますが、テキストがコンテナーよりも大きい場合、改行されます。

于 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 に答える