CSS：リストメニューの水平方向の空白をdisplay：inlineプロパティを使用して削除します。

私はCSSを初めて使用し、月末までにCSSで&のウェブサイトを公開することを目標としています。CSS：リストメニューの水平方向の空白をdisplay：inlineプロパティを使用して削除します。

私の質問：

私はli（リスト）の項目でdisplay: inlineプロパティを使用する場合、私はli（リストの間の水平方向のスペースを取得する、しかし、ホバードロップダウンでCSS水平メニューを構築しようとしています）項目をバーに表示します。このスペースを削除するにはどうすればよいですか？ここで

はHTMLです：

<div id="tabas_menu"> 
    <ul> 
     <li id="tabBut0" class="tabBut">Overview</li> 
     <li id="tabBut1" class="tabBut">Collar</li> 
     <li id="tabBut2" class="tabBut">Sleeves</li> 
     <li id="tabBut3" class="tabBut">Body</li> 
    </ul> 
</div>

そして、ここでは、CSSです：

#tabas_menu { 
    position: absolute; 
    background: rgb(123,345,567); 
    top: 110px; 
    left: 200px; 
} 

ul#tabas_menu { 
    padding: 0; 
    margin: 0; 
} 

.tabBut { 
    display: inline; 
    white-space: 
    list-style: none; 
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,142,190,1)),to(rgba(188,22,93,1))); 
    background: -moz-linear-gradient(top, rgba(255,142,190,1), rgba(188,22,93,1)); 
    font-family: helvetica, calibri, sans-serif; 
    font-size: 16px; 
    font-weight: bold; 
    line-height: 20px; 
    text-shadow: 1px 1px 1px rgba(99,99,99,0.5); 
    -moz-border-radius: 0.3em; 
    -moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.5); 
    -webkit-border-radius: 0.3em; 
    -webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.5); 
    padding: 6px 18px; 
    border: 1px solid rgba(0,0,0,0.4); 
    margin: 0; 
}

私はスペースがfloat: left/rightプロパティを使用して削除されますすることができますが、それは私が達成できない理由として、私を盗聴ですdisplayプロパティを使うだけで同じ効果が得られます。

出典

2011-01-17 Kayote

'background'宣言を' background-image'に変更することもできます。あなたの正確な意図はわかりませんが、省略構文解析は、他の背景属性を上書きする構文につながります。 http://jsfiddle.net/XVXyA/を参照してください。 http://jsfiddle.net/XVXyA/1/と比較してください。 –

私は数週間前にremarkably similar questionを持っていました。

水平スペースは完全に合理的です。インライン要素の間、空白は重要です。

<b>Label:</b> <span>content</span>

このコンテンツが次のように表示される場合、あなたは不満を感じませんか？

レーベル：HTMLのブロック要素の内容

有病率は空白の役割について忘れに私たちを台無しにします。しかし、インライン要素（インラインブロック要素を含む）を使用するときはいつも、HTMLが基本的にマークアップでありコーディング言語ではないので、マークアップの空白は実際には重要であることを覚えておく必要があります。

問題の解決策がいくつかあります（重要でない場合は、美的理由でHTMLの空白を保持したい場合は、スペースを取り除いて終了してください）、最も簡単な方法は次のとおりです。親コンテナにfont-size: 0pxを適用してから、フォントサイズをfont-size: 16pxに変更するか、各インライン要素内のフォントサイズに復元します。これにより、それらの間のテキストノードが0のフォントサイズを持つようになります。

出典

2011-01-17 18:00:17

Stevenに感謝します。私はフォントサイズのトリックが好きです。それと共に遊びます。助けをお祈りします。 – Kayote

フォントのサイズtrick is good。そして、あなたが間違いなくスペースを必要としている時間はたくさんあります。例えば。互いに隣り合っているはずのメニューボタンです。 –

font-size：0の便利なトリックありがとう！ – Heihachi

一部のブラウザでは、リスト項目間の空白がレンダリングされるという問題があります。たとえば：

<li>item 1</li> 
<li>item 2</li>

最初の行に、次の行に<li>前</li>後に改行（そしておそらくいくつかのタブ）があります。いくつかのWebブラウザは、これをスペースとしてレンダリングします。 2つの回避策があります。

<ul> 
    <li id="tabBut0" class="tabBut">Overview</li><li id="tabBut1" class="tabBut">Collar</li><li id="tabBut2" class="tabBut">Sleeves</li><li id="tabBut3" class="tabBut">Body</li> 
</ul>

これは醜いソリューションの一種であるが、それは動作します：

一つはそうのように、これらすべてのスペースを削除することです。

他の可能性はあなた自身が言ったことです - float: leftを使用してください。個人的には、私はいつも浮動小数点の解決策を取ります。

出典

2011-01-17 17:57:50

float:leftを使用すると、ブラウザのレイアウト計算が複雑になります。レンダリングの速度と効率を気にする場合は、<li>の項目の間の空白をすべて削除してください。

出典

2012-03-05 08:22:21 anon

<html> 
<head> 
<style> 
ul li, ul li:before,ul li:after{display:inline; content:' '; } 
</style> 
</head> 
<body> 
<ul><li>one</li><li>two</li><li>three</li></ul> 
<ul> 
    <li>one</li> 
    <li>tw`enter code here`o</li> 
    <li>three</li> 
</ul> 
</body> 
</html>

出典

2013-01-30 06:30:41 user2024227

CSS：リストメニューの水平方向の空白をdisplay：inlineプロパティを使用して削除します。

答えて

関連する問題