3

ここに HTML でコーディングされたメニューがありますが、名前と価格の間に点線が必要です。私はちょっと迷っています笑。

ここで見ることができます。

http://mystycs.com/menu/menuiframe.htm

css を使用してそれを実行できることはわかっていますが、これら 2 つの間にまたがるにはどうすればよいでしょうか。

ありがとう =)

4

6 に答える 6

6 
<style type="text/css">
 .menugroup{
    width:100%;
 }    


 .itemlist{
        list-style-type: none;
 }

 .seperator{
        margin: 5px; 
        width:50%; 
        border-bottom: 1px dotted #000
 }

</style>


<div class="menugroup">

   <ul class="itemlist">
      <li>item name<span class="seperator"></span>price</li>
   </ul>

</div>
于 2010-10-12T20:20:55.727 に答える
3

うわー、どこから始めますか？あなたが持っているのは、それぞれの上にヘッダーが付いた多数のリストであり、いくつかは上および/または下にメモが付いているので、それが使用する必要があるマークアップです:

<h2>Egg Platters</h2>
<div class="note">Served With Home Fries &amp; Toast</div>
<ul>
    <li><span class="item">Two Eggs Any Style</span><span class="separator"> </span><span class="price">2.75</span></li>
  (etc.)
</ul>
<div class="note">Add On Any Two Slices ...</div>
<div class="note large">Add Coffee for $0.50 with ...</div>

あなたclass="price"は大丈夫ですがclass="red"、悪い選択です-なぜ<strong class="bold">それが赤いのかに基づいてクラスに名前を付けます（私の「メモ」のように）。見出しを使用すると、テキストを大きくするために「太字」にする必要がなくなります。<strong>

ここで、<span class="separator">幅を指定したり、フロートを使用したりして、セパレーターの空白を拡張してアイテムと価格の間を埋めることができるように、 を入れました。

.separator {
    border-bottom: 1px dotted #333;
}

編集: ClarkeyBoy のコメントにも同意します。全体の幅を制限すると読みやすくなり、TripWired のリンクはいくつかの良い方法を示しています (基本的に私が提案したものを使用しています)。

于 2010-10-12T20:37:03.643 に答える
2

このようなことを考えたことはありますか？

http://5thirtyone.com/archives/776

于 2010-10-12T20:36:20.643 に答える
2

通常、私はテーブルをお勧めしません...しかし、この場合はテーブルに非常にうまく適合します.

使いやすさが非常に悪いため、点線は使用しません (点線のページがある場合は、非常に雑然としていて、それぞれをたどるのが難しいです。おそらく、画面上で指を使用するように、メニュー - 良くない）。

代わりに、行の色が交互になっている表を使用しないでください。次に、行全体を強調表示するロールオーバー状態を作成して、各アイテムの価格をユーザーに完全に明確にします。

ここにコードを含む優れたチュートリアルの例があります (例 3 を参照): http://bit.ly/9jTnAx

コードはページの下部にあり、あなたの側からコピーして貼り付けるだけです。

幸運を！

于 2010-10-13T00:38:30.500 に答える
1

行全体で背景 x の繰り返し .gif を使用し、フロートの左側のアイテム名とフロートの右側のアイテム価格を白い背景色で非表示にします。

.line{ クリア: 両方; margin-bottom:15px; background:transparent url(img/common/dot.gif) repeat-x scroll 0 0; 高さ:22px; } .label{ 背景色:#FFF; パディング右：2px; フロート:左; } .price{ float:right; 背景色:#FFF; パディング左: 2px; }

于 2011-04-15T03:30:03.387 に答える