javascript - Is there a way to have a div tag without having a line break, or is there an alternative? - Stack Overflow

admin管理员组

文章数量:1417404

In my website, in asp 4 / vb, I have a situation where I need to include a class, "noprint", in my footer, as defined in print.css. But I already have a span class, so I wrapped div tags around it. And my tr's and td's all have classes in them already.

Basically, I have this in my footer:

Knowledge Base | Contact USS | Copyright © USS Vision Inc. 2012 | 888-888-8888

And the only thing I want printed out is the phone number.

I use

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

And that works fine. But when viewing the webpage, I don't want the 888-888-8888 to appear below everything else, so I can't use div tags, I suppose. The noprint works great, but is there any way I can use the noprint in my footer without putting the phone number below the rest of the footer due to the div tags? Thanks for any help anybody can offer!

Update: My print.css stylesheet looks like this:

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

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

So I don't know how to make the div tags display: inline, but I will search around and try to figure it out!

In my website, in asp 4 / vb, I have a situation where I need to include a class, "noprint", in my footer, as defined in print.css. But I already have a span class, so I wrapped div tags around it. And my tr's and td's all have classes in them already.

Basically, I have this in my footer:

Knowledge Base | Contact USS | Copyright © USS Vision Inc. 2012 | 888-888-8888

And the only thing I want printed out is the phone number.

I use

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

And that works fine. But when viewing the webpage, I don't want the 888-888-8888 to appear below everything else, so I can't use div tags, I suppose. The noprint works great, but is there any way I can use the noprint in my footer without putting the phone number below the rest of the footer due to the div tags? Thanks for any help anybody can offer!

Update: My print.css stylesheet looks like this:

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

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

So I don't know how to make the div tags display: inline, but I will search around and try to figure it out!

• javascript
• asp
• css
• stylesheet

Share Improve this question Follow edited Apr 17, 2015 at 7:16 Code Lღver 15.6k1616 gold badges5959 silver badges7575 bronze badges asked Sep 23, 2012 at 6:52 Jason WeberJason Weber 5,74166 gold badges4242 silver badges7373 bronze badges

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 4

gd1 is absolutely right about span/div and display inline/block, but on a side note I'd add that what you're trying to achieve is often done with a list (as it really is a list of links in your footer)

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

with a css like

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

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

hope that helps

Use <span>.

However you can make a div "inline" using the style display: inline, but in this case you just need a <span>.

use css

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

If not use the inline counterpart span, as a answer already said. But remember inline display donot have block properties like height, top-margin, bottom-margin.

If you still want to use an extra div, I remend using display:inline, but if you just want the whole footer to have both classes you can do that as well.

You can add multiple classes like this:

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

In CSS this would look like:

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

Alternatively, the 'noprint' class will also work without specifying all three classes.

Here's an example: http://jsfiddle/yKRyp/

well set the specific width and height of the div using CSS and apply 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>

a live example here

http://jsfiddle/AGWGs/

div is a block-type element, it is usually used as to group and contain block-type elements. Using CSS, you can change the display type of any element, however.

In a quick example:

display:inline Makes an element to show inline, they can be put side by side. span element is an inline element. This cannot use block-type-only css rules such as: margin, padding, width, height ...

display:block Makes an element to be displayed as a block. Unless inherited values or given CSS rules, they will take a line long, blocked. They can take block-type CSS rules. And they can be stacked side-by-side using float. However, unless the line is cleared(clear: left, clear:right or clear:both), following elements after the floated element will overflow the previous container.

display:inline-block Makes an element have block features, with inline displaying. This is pretty similiar to using float and making block-type elements shown in-line. However this rule is IE8+ support only, so I would encourage you to use floating to keep the maximum patibility.

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

本文标签：