有没有办法在没有换行符的情况下使用 div 标签，或者有​​替代方法吗？

Posted 2023-03-06

【中文标题】有没有办法在没有换行符的情况下使用 div 标签，或者有​​替代方法吗？

【英文标题】：Is there a way to have a div tag without having a line break, or is there an alternative?

【发布时间】：2012-09-15 01:05:42

【问题描述】：

在我的网站中，在 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，但我会四处寻找并尝试弄清楚！

【参考方案1】：

使用CSS设置div的具体width和height并应用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】：

使用<span>。

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

【讨论】：

感谢 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 规则，例如：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+.

【讨论】：

谢谢你的信息，死死的！我真的需要了解更多关于 float:left、display:inline 的知识，但我快到了！感谢您抽出宝贵时间回复！

不客气。如果您是 CSS 新手，我鼓励您查看w3schools.com/css，您可以在那里进行实验和学习！ ^^