【问题标题】:Is there a way to have a div tag without having a line break, or is there an alternative?有没有办法在没有换行符的情况下使用 div 标签,或者有​​替代方法吗?
【发布时间】:2026-01-18 11:30:01
【问题描述】:

在我的网站中,在 asp.net 4 / vb 中,我需要在页脚中包含一个类“noprint”,如 print 中所定义。 CSS。但是我已经有一个 span 类,所以我将 div 标签包裹在它周围。而且我的 tr 和 td 都已经有类了。

基本上,我的页脚中有这个:

知识库 |联系我们 |版权所有 © USS Vision Inc. 2012 | 888-888-8888

而我唯一想要打印出来的就是电话号码。

我用

<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,但我会四处寻找并尝试弄清楚!

【问题讨论】:

    标签: javascript asp.net css stylesheet


    【解决方案1】:

    使用CSS设置div的具体widthheight并应用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/

    【讨论】:

    • 感谢您抽出宝贵时间回复,马汉。我正在处理 print.css,虽然我不太了解如何编写 css。但是感谢您的回复,因为您让我走上了正轨!
    • 不客气 =) 好吧,你必须尽快将自己带入 CSS =) 祝你好运
    • 是的,谢谢你的提琴,也......这真的很有帮助。我没有意识到设置适当的宽度有多重要……这是我最接近想要得到的东西。再次感谢!
    【解决方案2】:

    使用&lt;span&gt;

    但是,您可以使用样式 display: inline 将 div “内联”,但在这种情况下,您只需要 &lt;span&gt;

    【讨论】:

    • 感谢 gd1 的帮助。我将尝试使用跨度,并将类“semismallcontent”放在 div 标签中。如果这不起作用,我会尝试 display: inline,虽然我不知道如何编写样式表。如果你看到这个,我在我的帖子中添加了我的 print.css 样式表中的内容。再次感谢您花时间阅读、回复和帮助我;我真的很感激!
    • 谢谢 :) 只是一个提示:尽量不要以 CSS 类的出现命名,如果可能的话,以它们的本质命名。如果您将页脚 div 称为“semismallcontent”,那么如果您想让页脚变大 1pt(但不是所有其他“semismallcontent”内容),则必须更改它。做一个“页脚”类,而不是......
    【解决方案3】:

    使用css

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

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

    【讨论】:

    • 谢谢罗希特。我从来没有意识到在你的 CSS 中指定宽度和高度是多么重要。我将访问 w3schools 以了解有关 display:inline 属性的更多信息。再次感谢您的信息!
    【解决方案4】:

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

    希望对你有帮助

    【讨论】:

    • 我同意并赞成,但这里有一点“CSS 矫枉过正”。这只是一个愚蠢的页脚线,没必要这么聪明。
    • 感谢您的支持,我终于可以发表评论(这就是我对您的回答所做的,但由于我不能,我觉得给出一个完整的例子更像是回答)跨度>
    【解决方案5】:

    如果您仍想使用额外的 div,我建议使用 display:inline,但如果您只是希望整个页脚同时包含两个类,您也可以这样做。

    你可以像这样添加多个类:

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


    在 CSS 中,这看起来像:

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


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

    这是一个例子:http://jsfiddle.net/yKRyp/

    【讨论】:

    • 感谢您花时间为我制作小提琴——玩弄小提琴确实帮助我更多地了解了各种 css 属性的工作原理。感谢您的帮助和信息!
    • 不客气! :) 我很高兴提供有用的信息来帮助您学习 CSS 属性!
    【解决方案6】:

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

    举个简单的例子:

    display:inline 使元素内联显示,它们可以并排放置。 span 元素是一个内联元素。这不能使用仅块类型的 css 规则,例如:marginpaddingwidthheight ...

    display:block 使元素显示为块。除非继承值或给定 CSS 规则,否则它们将占用一行很长的行,被阻塞。他们可以采用块类型的 CSS 规则。它们可以使用float 并排堆叠。但是,除非该行被清除(clear: leftclear:rightclear: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+.

    【讨论】:

    • 谢谢你的信息,死死的!我真的需要了解更多关于 float:left、display:inline 的知识,但我快到了!感谢您抽出宝贵时间回复!
    • 不客气。如果您是 CSS 新手,我鼓励您查看w3schools.com/css,您可以在那里进行实验和学习! ^^
    最近更新 更多