現在擬似クラスを使用してページを作成しています。
擬似クラスはselectivizr.jsを使用しています。
http://selectivizr.com/
ソースは下記になります。
#navi {
list-style:none;
width:150px;
margin:0;
padding:0 10px;
overflow:hidden;
/zoom:1;
}
#navi li {
float:left;
padding:0 10px;
border-left:1px solid #000;
white-space:nowrap;
}
#navi li:nth-child(3) {
clear:both;
border-left:none;
}
<ul id="navi">
<li>テスト1</li>
<li>テスト2</li>
<li>テスト3</li>
<li>テスト4</li>
</ul>
としていますが、ページの表示上では問題ないのですが、プリントプレビューを見るとききません。(IEのみ)
上記の擬似クラスを使用しても綺麗に印刷できる方法はないのでしょうか?
擬似クラスを使用しないとか、idやclassを使えば等のコメントではなく、できる限りの方法がしりたいです。
print.css使用は可能です。
宜しくお願いします。
No.2ベストアンサー
- 回答日時:
スタイルシート一文字抜けてました。
ul#navi,ul#nav li{
list-style:none;/* IEバグ対策(displayを指定してもマーカーが残る */
display:block;margin:0;padding:0;
}
ul#navi{width:150px;}
ul#navi li { /* navと指定していました */
width:70px;
float:left;
line-height:30px;
height:30px;
border-left:1px solid #000;
}
たまたま画面ではfloatが解除されたのは、親コンテナブロックの幅が150pxだったからです。その証拠に、
#navi li:nth-child(3) {
clear:both;
border-left:none;
}
がなくても、下の段に移動します。
印刷スタイルシートでは、pxの値はしばしばトラブルの原因となります。CSS2.1で変更になりました。
【引用】____________ここから
Note that if the anchor unit is the pixel unit, the physical units might not match their physical measurements. Alternatively if the anchor unit is a physical unit, the pixel unit might not map to a whole number of device pixels.
Note that this definition of the pixel unit and the physical units differs from previous versions of CSS. In particular, in previous versions of CSS the pixel unit and the physical units were not related by a fixed ratio: the physical units were always tied to their physical measurements while the pixel unit would vary to most closely match the reference pixel. (This change was made because too much existing content relies on the assumption of 96dpi, and breaking that assumption breaks the content.)
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Syntax and basic data types( http://www.w3.org/TR/CSS2/syndata.html#length-un … )]より
印刷用の場合は、cmやmmもしくは、ptやpcで指定するほうが確実です。
なお、floatにいったん指定した要素にclearを指定しても本来は利きません。有効なブラウザもあります。
nth-child(n)はCSS3のセレクタです。いくつかの数で折り返したいときは、nth-child(2n)とかnth-child(3n)ですかね。
CSS2.1で書けば
#navi li+li{}
#navi li+li+li{}
#navi li+li+li+li{}
と隣接セレクタを使う。
それでもIE5など古いブラウザには無効なので、コンテナブロックの幅をfloatさせる要素の2個以上3個未満の幅に指定するほうが楽です。単位は絶対単位で!!
No.1
- 回答日時:
それ以前の設定で、floatされている要素でclearしてもclear出来ないのが本来の仕様です。
clearされるのはIEのバグ・・多分他のブラウザではclearされない。
この場合、ボックスとなるコンテナブロック(ul)の幅を決めてfloatさせれば、clearの必要はないはずです。
ul#navi,ul#nav li{
list-style:none;/* IEバグ対策(displayを指定してもマーカーが残る */
display:block;margin:0;padding:0;
}
ul#navi{width:150px;}
ul#nav li {
width:70px;
float:left;
line-height:30px;
height:30px;
border-left:1px solid #000;
}
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS インラインブロックの中のテキストを上下中央に合わせたい 1 2022/12/24 17:46
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
liタグの中に<p>タグやら<dl>を...
-
HTML5のfooterに見出しを付けて...
-
リストの数字のフォントサイズ...
-
リストマーカーをボックス内に...
-
html <ul></ul>の並びで一行空...
-
HTMLで組織図を作成する方法
-
画像にリンクを張ると画像がず...
-
リンク文字同士の間隔を開ける...
-
タイトルの横にサブタイトルが並ぶ
-
ulタグやliタグの中でbrタグ...
-
透明のボックスにリンクを貼りたい
-
IE8でli:hoverが効かない
-
html/cssの、navを2段にする...
-
メニューの横並びで改行されて...
-
<ul><li></li></ul>にするメリ...
-
番号付きリスト(<Ol><Li>・・...
-
cssで、入れ子になったリストに...
-
IEで<td>の全角を有効にする方法
-
リストを一行にせずに横並びに...
-
HTMLもしくはCSSのULでリンクを...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
<table>の高さ固定。情報増加時...
-
ulタグやliタグの中でbrタグ...
-
html/cssの、navを2段にする...
-
リストの数字のフォントサイズ...
-
liタグの中に<p>タグやら<dl>を...
-
CSSでつくったメニューのアニメ...
-
htmlの<ol>タグで、数字などを...
-
ページを開いているときのリン...
-
リンク文字同士の間隔を開ける...
-
レスポンシブWebデザインでリン...
-
<ul><li></li></ul>にするメリ...
-
divタグ内のコンテンツが重なっ...
-
HTMLで組織図を作成する方法
-
ulとliで囲った文字の一部を変...
-
HTML5のfooterに見出しを付けて...
-
<ul>~</ul>が二つ続くと間に改...
-
html <ul></ul>の並びで一行空...
-
複数行にまたがる括弧を表示し...
-
画像にリンクを張ると画像がず...
おすすめ情報