0

申し訳ありませんが、私は HTML5 と CSS3 にまったく慣れていないため、検索しても本当に基本的なことだと確信しているものは何も見つかりませんでした。私がやろうとしているのは、私のウェブサイトのクリック可能な画像/リンクの行を作成することです. スタック オーバーフローに質問があるのと同じように、上記のユーザー リンクにタグを付けます。

これまでのところ、私の css は次のようになっています。

a#header { 
    display:block;
    margin: 0px auto;
    padding: 0px 15px 0px 15px;
    border: none;
    background: url('img url') no-repeat bottom;
    width: 50px;
    height: 100px;    
}

しかし、これは私が求めていることをしていません。画像を画面の中央に配置するだけです。誰か助けてくれませんか？また、このようなことを行うためのベストプラクティスはありますか?

4

4 に答える 4

1

margin:0 auto画面の中央に置いているのがこれです。おそらく、これをドロップするか、個々のボックスではなくコンテナー要素に配置することをお勧めします。

複数のボックスを一列に並べるためにおそらく必要なのは、 または のいずれfloat:leftかdisplay:inline-blockです。これらのいずれかが機能します。これらは動作が異なり、レイアウトを希望どおりに動作させるためには、両方について知っておく必要がありますが、これらの追加の詳細については、さらに調査するために残しておきます。

引用したコードは HTML5 や CSS3 に固有のものではないことに注意してください。これはすべて、長い間使用されてきた基本的な HTML/CSS 構文です。

于 2013-08-09T15:57:01.717 に答える
0

たぶん、このようなものですか？

http://jsfiddle.net/MRayW/6/

<nav>
    <ul>
        <li><a href="#" id="header_0">a</a></li>
        <li><a href="#" id="header_1">b</a></li>
        <li><a href="#" id="header_2">c</a></li>
        <li><a href="#" id="header_3">d</a></li>
        <li><a href="#" id="header_4">e</a></li>
        <li><a href="#" id="header_5">f</a></li>
        <li><a href="#" id="header_6">g</a></li>
    </ul>
</nav>

a[id^='header_'] {
    border: none;
    background: url('xxx.jpg') no-repeat bottom;
    width: 50px;
    height: 50px;
    text-align:center;
    color:red;
    list-style:none;
    float:left;
    margin:5px;
}

ul {
    padding:0px;
    margin:0px;
    background-color:#EDEDED;
    list-style:none;
    background: none repeat scroll 0 0 red;
    height: 60px;
    margin: auto;
    width: 420px;
}

nav {
    margin:0 auto
    width:500px;
}
于 2013-08-09T15:51:51.760 に答える
0

あなたが私のように怠け者なら、いくつかの<a>タグを<header>またはに入れ<nav>、 を使用できますdisplay: inline-block。

http://jsbin.com/ivevey/3/edit

HTML

<header>
  <a href></a>
  <a href></a>
  <a href></a>
  <a href></a>
  <a href></a>
</header>

CSS

header {
  text-align: center;
}

header > a { /* assuming a <header> contains your <a> tags */
    display: inline-block; /* make sure every image/link is treated like text, ltr */

    width: 15px; /* width/height or padding. either works */
    height: 15px; 

    background-color: red; /* This should work for a 15px x 15px image instead */
}

リンク間のスペースに注意してください。それらは空白文字です。私は通常、header {font-size: 0;}それをクリアするために使用します。

理想的には、ナビゲーション リンクのリストで<ul>ある<nav>ため、 にが含まれる構造が必要です。

于 2013-08-09T15:57:21.167 に答える