Question

在我的网站上，在asp.net 4 / vb中，我需要在打印中定义的页脚中包含一个类“ noprint ”。 CSS 即可。但是我已经有了一个span类，所以我在它周围包装了div标签。我的tr和td都已经有了课程。

基本上，我在页脚中有这个：

我唯一要打印的是电话号码。

我用

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

这很好用。但是在查看网页时，我不希望888-888-8888出现在其他所有内容之下，所以我想不能使用div标签。 noprint工作得很好，但是有没有什么办法可以在我的页脚中使用noprint，而不会因为div标签而将电话号码放在页脚的其余部分下面？感谢任何人提供的任何帮助！

更新：我的 print.css 样式表如下所示：

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

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

所以我不知道如何制作div标签display: inline，但我会搜索并尝试弄明白！

Answer 1

使用<span>。

但是，您可以使用样式display: inline创建div“inline”，但在这种情况下，您只需要<span>。

Answer 2

gd1绝对是关于span / div并显示内联/块的，但是在附注中我会补充说你想要实现的通常是用列表完成的（因为它实际上是一个链接列表）你的页脚）

<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;
}

希望有所帮助

Answer 3

使用css

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

如果不使用内联对应跨度，作为答案已经说过。但请记住，内联显示不具有高度，上边距，下边距等块属性。

Answer 4

如果您仍想使用额外的div，我建议使用display：inline，但如果您只想让整个页脚同时拥有这两个类，那么您也可以这样做。

您可以添加多个类：

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

在CSS中，这看起来像：

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

或者，'noprint'类也可以在不指定所有三个类的情况下工作。

以下是一个示例：http://jsfiddle.net/yKRyp/

Answer 5

使用CSS很好地设置width的具体height和div并应用float

<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/

Answer 6

div是块类型元素，通常用于分组和包含块类型元素。但是，使用CSS，您可以更改任何元素的显示类型。

在一个简单的例子中：

display:inline使元素显示为内联，它们可以并排放置。 span元素是内联元素。这不能使用仅限块类型的css规则，例如：margin，padding，width，height ......

display:block使元素显示为块。除非继承的值或给定的CSS规则，否则它们将占用一行，被阻止。他们可以采用块型CSS规则。它们可以使用float并排堆叠。但是，除非清除该行（clear: left，clear:right或clear:both），否则浮动元素后面的元素将溢出前一个容器。

display:inline-block使元素具有块特征，并具有内联显示。这非常类似于使用float并使块状元素以串联方式显示。但是这个规则只是IE8 +支持，所以我鼓励你使用浮动来保持最大的兼容性。

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

有没有办法在没有换行符的情况下使用div标签，还是有替代方案？

6 个答案: