5

i have requirement where i need to display text and button in one box. i have placed button tag inside span which has text and button

  inside span tag
  +-------------------+
  | text here         |
  |                   |    
  | <button> tag here |
  +-------------------+

my question is the right approach having button inside span. as just learned span is inline element and it can have only text, images etc..

What is the difference between HTML tags <div> and <span>?

Community
  • 1
  • 1
pappu_kutty
  • 2,378
  • 8
  • 49
  • 93
  • i have list of boxes, where i have toggle button, like invite/ignore functionality for each person boxes – pappu_kutty Nov 28 '13 at 13:39
  • 7
    You can't place a block element inside a span (or any inline element), but a button is an inline element and can be places inside a span, so yes, that is the right approach if you're looking for an inline element containing text and another inline element. – adeneo Nov 28 '13 at 13:42

2 Answers2

3

You can of course use CSS to render the span as a block element, or even an inline-block if that is what you need.

.yourSpanClass {
    display: block;
}

.yourSpanClass {
    display: inline-block;
}

Though, i'd advice you to simply use a div if you have access to the HTML.

Supported browsers: http://caniuse.com/inline-block

Smurker
  • 714
  • 6
  • 17
  • The button element is indeed rendered as inline. This was just an example if he needed to render the span as a block element. – Smurker Nov 28 '13 at 13:42
  • 1
    IE support inline-block element, but you can use it only with block elements. With inline elements you need css hack: display: inline-block; *display: inline; zoom: 1; – Andy1210 Nov 28 '13 at 13:53
-5

Drop the button. Use CSS/jQuery to make the span a button. Don't forget to style :hover and use JS/jQ to do the intended action

MayTheSchwartzBeWithYou
  • 1,181
  • 1
  • 16
  • 32
  • 1
    The semantics are all mixed up here, a span is a span - a button is a button. –  Jun 17 '16 at 09:53
  • says who? He needed a span inside a button – MayTheSchwartzBeWithYou Jun 19 '16 at 01:06
  • 4
    `Use CSS/jQuery to make the span a button`. It's a bad idea to style and define elements in a way that mimics other elements. If the span needs to be a button - it should be a button element. I could style a span to mimic a H1, doesn't mean it should be. It's a pain to comply with semantics - but it's worth it. Accessibility for one - how would a visually-impaired user has access to the ability to interact with an element if that element type is typically just used for static content? –  Jun 21 '16 at 09:41