Win a copy of Kotlin in Action this week in the Kotlin forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic

Placing Two Tags on same Line  RSS feed

 
Steve Dyke
Ranch Hand
Posts: 1775
1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I need to show a hyperlink and a span tag on the same line on my page.

However, using this code the span goes on next line because the li a css defines display: block



I there a way to force the span to display on same line?
 
Bear Bibeault
Author and ninkuma
Marshal
Posts: 66182
146
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
A display value of block will force the rest of the content down. So change it to something like inline or inline-block.
 
Bear Bibeault
Author and ninkuma
Marshal
Posts: 66182
146
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Although, reading more clearly, a display of block on the li should not affect its content.

The link and span should already be inline elements. Are you sure there's no CSS being applied that changes that?

Inspect the elements to see what styles are being assigned.
 
Steve Dyke
Ranch Hand
Posts: 1775
1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Bear Bibeault wrote:Although, reading more clearly, a display of block on the li should not affect its content.

The link and span should already be inline elements. Are you sure there's no CSS being applied that changes that?

Inspect the elements to see what styles are being assigned.


This is the CSS for the menu class:

 
Bear Bibeault
Author and ninkuma
Marshal
Posts: 66182
146
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Have you looked through it? I can see exactly why the link is doing what you describe. Look through the CSS and see if you can spot it.

Use the inspector as described if you can't see it in the source.

Also, you have multiple values for the same property in at least one place. Needs to be cleaned up.
 
Steve Dyke
Ranch Hand
Posts: 1775
1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Bear Bibeault wrote:Have you looked through it? I can see exactly why the link is doing what you describe. Look through the CSS and see if you can spot it.

Use the inspector as described if you can't see it in the source.

Also, you have multiple values for the same property in at least one place. Needs to be cleaned up.


I have an extra display on the .menu .li and the display: blaoc on the .menu a has the display: block property that seems to be causing the push to next line issue.

However, if I remove the display: block property from the link css, when I hover over the link the background only changes the link and not the li tag
 
Stephan van Hulst
Saloon Keeper
Posts: 7797
142
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
What background? I don't see a hover pseudo-class.
 
Bear Bibeault
Author and ninkuma
Marshal
Posts: 66182
146
IntelliJ IDE Java jQuery Mac Mac OS X
  • Likes 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
If you want an inline element to act like a bloc (without the "new line" thing) use inline-block
 
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!