3

私のウェブサイトの asp.net 4/vb では、print.css で定義されているように、フッターにクラス「noprint」を含める必要がある状況があります。しかし、すでにスパン クラスがあるので、それを div タグで囲みました。そして、私の tr と td にはすべて既にクラスがあります。

基本的に、私はフッターにこれを持っています：

知識ベース | USS | お問い合わせ 著作権 © USS Vision Inc. 2012 | 888-888-8888

そして、私が印刷したいのは電話番号だけです。

私が使う

<div class="noprint">whatever I want omitted when printing</div>

そして、それはうまくいきます。しかし、Webページを表示するときに、他のすべての下に表示したくないので、888-888-8888divタグを使用できないと思います. noprint はうまく機能しますが、div タグのためにフッターの残りの下に電話番号を配置せずに、フッターで noprint を使用する方法はありますか? 誰でも提供できる助けをありがとう！

更新: 私のprint.cssスタイルシートは次のようになります。

@media screen
{
   /* whatever styles you have for display */
}

@media print
{
   .noprint { display: none; }
}

なので、divタグの作り方がわかりませんが、いろいろ調べてdisplay: inlineみます！

4

6 に答える 6

4

を使用し<span>ます。

ただし、 style を使用して div を「インライン」にすることはできますdisplay: inlineが、この場合は<span>.

于 2012-09-23T06:54:02.097 に答える
4

gd1 は、スパン/ディビジョンとインライン/ブロックの表示については完全に正しいですが、補足として、達成しようとしているのはリストを使用して行われることが多いことを付け加えておきます (実際にはフッター内のリンクのリストであるため)。

<ul class="footer">
  <li class="no-print">KnowledgeBase</li>
    ...
  <li>888-888-888</li>
<ul>

のようなcssで

.footer li {
  list-style-type: none;
  display: inline;
  padding: 0 10px;
  border-right: 1px solid black;    
}

.footer li:last-child {
  border-right: none;
}​

それが役立つことを願っています

于 2012-09-23T07:06:03.277 に答える
2

それでも余分な div を使用したい場合は、display:inline を使用することをお勧めしますが、フッター全体に両方のクラスを含めるだけの場合は、それも可能です。

次のように複数のクラスを追加できます。

<span class='footer lower noprint'></span>


CSS では、これは次のようになります。

.footer.lower.noprint{ display:none; }


または、「noprint」クラスも、3 つのクラスすべてを指定せずに機能します。

例を次に示します: http://jsfiddle.net/yKRyp/

于 2012-09-23T07:11:08.907 に答える
2

CSS を使用する

<div style="display:inline" class="noprint">whatever I want omitted when printing </div>

回答がすでに述べたように、インラインの対応するスパンを使用しない場合。ただし、インライン表示には高さ、上マージン、下マージンなどのブロック プロパティがないことに注意してください。

于 2012-09-23T06:58:19.777 に答える
1

divはブロックタイプの要素であり、通常、ブロックタイプの要素をグループ化して含めるために使用されます。ただし、CSSを使用すると、任意の要素の表示タイプを変更できます。

簡単な例：

display:inlineインラインで表示する要素を作成し、並べて配置できます。spanelementはインライン要素です。これは、次のようなブロックタイプのみのcssルールを使用することはできません：、、、margin.. ..paddingwidthheight

display:blockブロックとして表示される要素を作成します。継承された値または指定されたCSSルールがない限り、それらは1行長くかかり、ブロックされます。ブロックタイプのCSSルールを使用できます。また、を使用して並べて積み重ねることができますfloat。ただし、行がクリアされない限り（clear: left、clear:rightまたはclear:both）、float要素の後に続く要素は前のコンテナをオーバーフローします。

display:inline-blockインライン表示で、要素にブロック機能を持たせます。floatこれは、インラインで表示されるブロックタイプの要素を使用および作成するのと非常によく似ています。ただし、このルールはIE8 +のみをサポートしているため、最大限の互換性を維持するためにフローティングを使用することをお勧めします。

P.S: There are hacks that can be used to have display:inline-block feature used on IE5.5+.

于 2012-09-23T07:17:47.787 に答える
1

特定のCSSを適切に設定しwidthて適用heightするdivfloat

<div style='float:left; border:1px solid blue; width:100px; height:100px'>
div 1
</div>
<div style='float:left; border:1px solid red; width:100px; height:100px'>
div 2
</div><div style='float:left; border:1px solid orange; width:100px; height:100px'>
div 3
</div>

実例はこちら

http://jsfiddle.net/AGWGs/

于 2012-09-23T06:53:42.217 に答える