ちょっと変わったマニアな作品が集結

こんにちは、
liタグなのですが、長さを固定にすることって出来ますでしょうか?
横並びにして、ナビにつかっているのですが
文字数で幅が変わるので、一定の長さで固定にしたいとおもいまして。

このQ&Aに関連する最新のQ&A

A 回答 (2件)

cssのwidthとtext-align:center;を指定すれば可能です。

    • good
    • 0

liは本来ブロック要素なので、そのままでは横並びできないはずです。

文字数で伸縮すると言うことは、displayプロパティでinlineに指定しているのかな?
 displayの値をblockにしてfloatさせるなら、必ず幅を指定しているはずですし、displayの値をinline-blockにしているなら幅を指定してください。
 最近は、ウィンドウ/ディスプレイの幅がスマホから幅広ディスプレイと様々なので、リキッドデザインにすることが多いと思いますが、その場合は、ユーザー(特に視覚弱者)がフォントサイズを(大きく)変更する可能性があるので、余裕を見てサイズを指定するのが良いでしょう。min-widthで最小幅を指定して、ウィンドウ幅が小さい場合は2行になるようにしても良いでしょう。

[例]HTML4.01
<div class="nav">
 <ol>
  <li><a href="/">Top</a></li>
  <li><a href="/product">製品</a></li>
  <li><a href="/recruit">募集</a></li>
  <li><a href="/profile">会社案内</a></li>
 <ol>
</div>
[例]HTML5
<nav>
 <ol>
  <li><a href="/">Top</a></li>
  <li><a href="/product">製品</a></li>
  <li><a href="/recruit">募集</a></li>
  <li><a href="/profile">会社案内</a></li>
 <ol>
</nav>

[CSS] HTML4.01用 ★リキッドでスマホにも対応★
div.nav{width:80%;margin:0 auto;max-width:800px;}
div.nav ol{line-height:40px;text-align:center;list-style:none;position:relative;}
div.nav ol,div.nav ol li{margin:0;padding:0;}
div.nav ol li{display:inline-block;width:20%;min-width:5em;}
div.nav ol li a{display:block;width:100%;height:100%;text-decoration:none;border:solid 1px red;}
div.nav ol li a:hover{background-color:yellow;}

[CSS]HTML5用
nav{width:80%;margin:0 auto;max-width:800px;}
nav ol{line-height:40px;text-align:center;list-style:none;position:relative;}
nav ol,div.nav ol li{margin:0;padding:0;}
nav ol li{display:inline-block;width:20%;min-width:5em;}
nav ol li a{display:block;width:100%;height:100%;text-decoration:none;border:solid 1px red;}
nav ol li a:hover{background-color:yellow;}


★line-heightは高さの中心を合わせるため指定しています。
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Q複数のボタンを等間隔に、かつ中央に配置する

ホームページで、ボタンを横に3つ等間隔に、適度な余白をもって並べ、
さらにその3つがちょうどページの中央に表示されるようにしたいです。
cssをどのように記述すればいいですか?
↓下記のようなイメージにしたいです。

--------------------
--------------------
    □ □ □  ←これがボタンです


↓htmlファイルです↓
<div class="button">
<input type="submit" value="<< 戻る <<" />
</div>

<div class="button">
<input type="submit" value="選択リセット" />
</div>

<div class="button">
<input type="submit" value=">> 進 む>>" />
</div>

↓CSSファイルです↓
div.button {
padding-right:35px;
float:left;
}

上記設定で、ボタンの左右間隔はいい感じにあいたのですが
全体的に左に寄ってしまってます。

よろしくお願いいたします。

ホームページで、ボタンを横に3つ等間隔に、適度な余白をもって並べ、
さらにその3つがちょうどページの中央に表示されるようにしたいです。
cssをどのように記述すればいいですか?
↓下記のようなイメージにしたいです。

--------------------
--------------------
    □ □ □  ←これがボタンです


↓htmlファイルです↓
<div class="button">
<input type="submit" value="<< 戻る <<" />
</div>

<div class="button">
<input type="submit" value="選択リセット" />
</div>

<div class="button...続きを読む

Aベストアンサー

<div class="button">
<input type="submit" value="<< 戻る <<" />
<input type="submit" value="選択リセット" />
<input type="submit" value=">> 進 む>>" />
</div>

div.button {
text-align:center;
}
div.button input {
margin: 0px 20px;
}

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

Qリストの左余白の削除方法

<li>リストを作成した再に表示されてしまう、左余白部分を削除して、画面左に詰めたいのですが、上手く出来ません。
どなたかご教授頂けませんでしょうか?

=>CSS記述<=
ul li {
list-style: none;
margin: 0px;
padding: 0px;}

=>HTML記述<=
<ul>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
</ul>

Aベストアンサー

ul li {

の箇所を

ul {

にするだけ

Q
  • (リスト)をサイズ指定し、絶対値にすることは可能でしょうか
  • ツリーを作るときに<LI>を使って、
    ・を表示させることができますよね、
    ・これをサイズ変更してなおかつ絶対値にしたいのですが、
    ・可能でしょうか?
    ・よろしくお願いします

    Aベストアンサー

     No. 1~No. 3 の回答をつけた者です。

     理屈では No. 3 で申し上げた方法でよいのですが,こちらで Windows 版の Internet Explorer 6,Netscape 6.2,Opera 6,Opera 7.2 で確認したところ,Opera 6 だけが期待どおりの出力になりました。なかなかに難しいものです。それ以外は,ul の行頭記号のサイズは,フォントサイズ指定には連動せず,ブラウザのフォントサイズ指定やズーム指定に連動するようです。

     それで,掲げてくださった例ですが,これには決定的な誤りがあって,「li 要素は ul 要素または ol 要素の内側にしか現れられない」というものです。ですから,大前提として,

    <ul>
    <li>menu</li>
    </ul>

    と書かなければなりません。

     それから,font 要素の扱いですが,

    <li><font ...>...</font></li>

    では理屈上どうやっても行頭記号の大きさは変わりません。というのは,行頭記号は li 要素がその中身とは別に作り出していることになっているので,その内側に働きかけても無駄ということになります。
     さらに,font 要素は今後の HTML ではお役ご免の予定ですので,<font size="...">...</font> または <font color="...">...</font> 以外の記述では,より一般的な記述である <span style="...">...</span> を使用されることをおすすめします。

     No. 1~No. 3 の回答をつけた者です。

     理屈では No. 3 で申し上げた方法でよいのですが,こちらで Windows 版の Internet Explorer 6,Netscape 6.2,Opera 6,Opera 7.2 で確認したところ,Opera 6 だけが期待どおりの出力になりました。なかなかに難しいものです。それ以外は,ul の行頭記号のサイズは,フォントサイズ指定には連動せず,ブラウザのフォントサイズ指定やズーム指定に連動するようです。

     それで,掲げてくださった例ですが,これには決定的な誤りがあって,「li 要素は ul 要素また...続きを読む

    QHTMLフォームのSELECTの幅を一定にするためには?

    HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
    いいのでしょうか?

    CSS等で設定できるとありがたいのですが、やり方がわかりません。

    Aベストアンサー

    <select style="width: 200px">

    QCSSでボックス幅を文字列に合わせたい

    ボックス幅を文字列の幅に合わせるにはどうしたらいいのでしょうか。
    テーブルではセルにwidth属性を指定しなくても文字列の幅になりますが、ボックスではwidthプロパティを指定しなかったら領域全体の幅になります。white-spaceプロパティでnowrap指定し、widthプロパティで文字列より小さいサイズに指定するとできるのですが、他に指定する方法があれば教えて下さい。

    Aベストアンサー

    div等のblock要素ではなくspan等のinline要素によって行う。

    <span style="border:solid 1px">文字幅に合わせた枠線</span>

    Qaタグに直接style=""で:hoverをしたいしたい

    お世話になります。
    下記のaタグのCSS記述部分を直接<a href="" style="..."として記述するには
    どのようにすればよいのでしょうか
    hoverをaタグ内に直接指定しようとしていろいろ調べたのですが、解説しているサイトを見つけられなくて、質問させてもらってます。
    A:link.menu {
    text-decoration:none;
    FONT-SIZE: 12px;
    COLOR: #0000ff;
    }
    A:visited.menu {
    text-decoration:none;
    FONT-SIZE: 12px;
    COLOR: #0000ff;
    }
    A:hover.menu {
    FONT-SIZE: 12px;
    color:#0000ff;
    background-color:#66bce2;
    }
    A:active.menu {
    FONT-SIZE: 12px;
    COLOR: #0000ff;
    }

    お手数お掛けしますが、どなた様かご教授いただけますようお願い致します。

    Aベストアンサー

    <a href="http://www.yahoo.co.jp" style="text-decoration:none;FONT-SIZE:12px;COLOR: #0000ff;"
    onmouseover="this.style.backgroundColor='66bce2'"
    onmouseout="this.style.backgroundColor=''">やふう</a>

    Qテーブルタグの中にdivを含めてはダメ?

    テーブルタグの中にdiv要素を入れるとダメなのでしょうか?
    何か不都合でもあるのでしょうか?
    何かご存知の方がいれば教えていただけませんか?

    Aベストアンサー

    以下、HTML 4.01での話です。(XHTMLでもほぼ同じだと思います)

    tableタグ直下に書けるのは、caption,col,colgroup,head,tfoot,tbodyと定義されています。
    特定の条件下でtbodyが省略できますので、実際はtrも書けます。これら以外は書けないことになっています。
    tr直下にはth,tdが書けることになっています(それ以外は不可)。

    th,tdの下にはブロック要素が書けるので、divも書けます。

    このように、テーブル内でth,tdの中以外でdivが使えないのはHTMLの仕様でそう決まっているからです。

    Qテーブルセル余白(例えば左側だけ、上側だけ、など)

    こんにちは。
    宜しくお願いいたします。

    テーブル内のコードに、cellpadding="5" は
    セル余白が上下左右のすべて、5ピクセル空きますが、

    左側だけ5ピクセル、とか、上側だけ5ピクセル、のように
    指定方向のみ、余白を作ることは可能でしょうか。

    その場合のHTML記述を教えてください。

    また、ここで質問させていただいている「指定方向への余白指定」と
    全体余白指定の「cellpadding="XX"」は同時に使って
    良いものでしょうか。
    素人質問ですみません。
    宜しくお願いいたします。

    Aベストアンサー

    1つのセルだけなら、下記で。
    <td style="padding: 5px 10px 20px 30px;">
    上の例は、上が 5px。 右が 10px。下が 20px。 左が 30px。
    適当に数値変更してください。
    cellpadding="5" と style="padding: 5px;"は同じになるはず。
    <td style="padding: 5px;">

    両方使うとどうなるかは、試して下さい。
    cellpadding をここ数年利用していないので・・・

    複数個所利用するなら、NO.1さんを参考に HEAD内に下記を入れて試してみましょう。
    <style type="text/css">
    <!--
    td {padding: 5px 10px 20px 30px;}
    -->
    </style>


    このQ&Aを見た人がよく見るQ&A

    人気Q&Aランキング