有没有一种方法可以使用div标签而不产生换行，或者有没有其他替代方案？

Question

有没有一种方法可以使用div标签而不产生换行，或者有没有其他替代方案？

3

在我的asp.net 4 / vb网站中，我有一个情况需要在底部包含一个名为“noprint”的类，该类是在print.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，但我会搜索并尝试弄清楚！

- Jason Weber

6个回答

4

使用 <span> 标签。

然而，你可以使用样式 display: inline 使 <div> 元素 "inline"，但在这种情况下，你只需要一个 <span> 标签。

- gd1

感谢gd1的帮助。我会尝试使用span，并将类“semismallcontent”放在div标签中。如果这不起作用，我会尝试display:inline，尽管我不知道如何编写样式表。如果您看到这条消息，我已经通过包含我的print.css样式表上的内容来更新我的帖子。再次感谢您抽出时间阅读、回复和帮助我；我真的非常感激！ - Jason Weber

1

只是一个提示：尽量不要根据外观来命名CSS类，而是根据它们的本质来命名。如果您将页脚div命名为“semismallcontent”，那么如果您想使页脚大1pt（但不是所有其他“semismallcontent”内容），则必须更改它。相反，请使用“footer”类... - gd1

2

使用CSS

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

如果不使用行内对应的标签，就像其他答案已经说过的那样。但是请记住，行内显示没有块属性，如高度、上外边距和下外边距。

- geekman

谢谢Rohit。我从未意识到在CSS中指定宽度和高度的重要性。我将访问w3schools以了解更多关于display:inline属性的信息。再次感谢您提供的信息！ - Jason Weber

2

如果您仍然想使用额外的div，我建议使用display:inline，但如果您只想让整个页脚具有两个类，也可以这样做。

您可以像这样添加多个类：

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

在CSS中，它看起来像这样：

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

或者使用'noprint'类也可以不指定所有三个类。

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

- Vita Pluvia

感谢您抽出时间为我创建一个 Fiddle -- 在 Fiddle 上玩耍真的帮助我更好地了解各种 CSS 属性的工作原理。我非常感激您的帮助和提供的信息！ - Jason Weber

1

不用谢！ :) 我很高兴能够提供有用的信息，帮助您学习CSS属性！ - Vita Pluvia

1

使用CSS设置

的特定宽度和高度，并应用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/

- Netorica

感谢抽出时间回复，Mahan。我正在处理print.css，虽然我对如何编写css不是很了解。但是非常感谢您的回复，因为您让我走上了正确的道路！ - Jason Weber

1

不客气 =) 好的，你必须尽快学习CSS =) 祝你好运 - Netorica

是的，谢谢你提供的示例代码，它真的帮了我很多。我之前没有意识到设置正确的宽度有多重要...这是我最接近想要的结果了。再次感谢！ - Jason Weber

1

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. 有一些技巧可以在IE5.5+上使用display:inline-block功能。

- ASertacAkkaya

谢谢你提供的信息，deadlike！我真的需要更多地了解float:left、display:inline，但我正在努力学习！感谢你抽出时间回复我！ - Jason Weber

1

不客气。如果你是CSS新手，我鼓励你去看看http://www.w3schools.com/css/，那里你可以实践和学习！^^ - ASertacAkkaya

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- David Palita · Accepted Answer

gd1的意见是完全正确的，关于span/div和display inline/block。但是我想补充一下，你所尝试实现的通常可以通过列表来完成（因为在页脚中它真的是一个链接列表）。

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

希望能帮到您。