リスト項目のホバー間隔を

Question

リスト項目として4列のリンクがあり、各リンクはホバー上で太字になります。リンクの1つ上にマウスを置くと太字になると、列の幅が広がり、後続の列が表示されます。ホバー上で他の列を押すのを防ぐにはどうすればいいですか？ http://jmenoff-architect.com/update10/

HTML：：

<ul class="projects-list"> 
    <li href="9thst.html">Greenwich Village Apartment</li></a> 
    <li href="les-apt.html">Lower East Side Apartment Combination</li></a> 
    <li href="tribeca.html">Tribeca Apartment Combination</li></a>   
</ul> 

CSS：

.projects-list { 
    display: inline-block; 
    list-style-type: none; 
    margin-left: -30px; 
    padding-right: 10px; 
    vertical-align:top; 
    } 
#projects-list li:hover { 
    font-weight: 600; 
} 

Answer 1

それを行います.projects-listの最小幅を設定

はここでサイトです。

のいずれかで作業していたときに約200ピクセルで作業していましたが、より保守性が必要な場合は、太字のテキストがある同じ場所にもう1つ透明なdivを追加してください。

Answer 2

liのhrefタグを使用しますが、HTML構文でli要素のhref属性はまったく許可されません。また、あなたのアンカータグは終了していますが、最初に問題を開始したタグは修正されていません。

そして、あなたはIDセレクタ

#projects-list li:hover {} 

を使用していますが、クラスセレクタを使用していることにより、選択しようとしています。ですから、このよう

.projects-list li:hover {} 

Answer 3

を選択する必要があります私は、それぞれが固有のIDを持つように<ul id="projects-list">のIDを変更して、それらを固定幅を与えることに進む与える示唆しています。これで問題は解決します

Answer 4

あなたのHTMLは正しいフォーマットではありません。私はこれがあなたがやりたいことだと思います。

<ul class="projects-list"> 
    <li> 
    <a href="9thst.html"> 
     Greenwich Village Apartment 
    </a> 
    </li> 
    <li> 
     <a href="les-apt.html"> 
     Lower East Side Apartment Combination 
     </a> 
    </li> 
    <li> 
     <a href="tribeca.html"> 
      Tribeca Apartment Combination 
     </a> 
    </li> 
</ul> 

私はそれが負のmargin-left、あなたは太字、それはより多くのスペースを占有し、ハッシュは期間をした必要があることを事実の組み合わせだと信じています。このCSSはあなたのために働くはずです。

.projects-list { 
    display: block; 
    float: left; 
    list-style-type: none; 
    margin-left: 30px; 
    padding-right: 10px; 
    vertical-align:top; 
    } 

.projects-list li:hover { 
    font-weight: 600; 
} 

私は負のマージンが重なり合うことを知っています。