[jQuery] Re: span tag is width:80px but is only showing the width of contents?

[Liam Potter]

display:inline-block;

Andy Matthews wrote:

Actually that will NOT fix it all. That makes the span into a block level
element which will force it to the next line.


andy

-----Original Message-----
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of Liam Potter
Sent: Friday, November 07, 2008 11:08 AM
To: jquery-en@googlegroups.com
Subject: [jQuery] Re: span tag is width:80px but is only showing the width
of contents?


the most simple way to do this, is to simply apply display:block on the
span.
<span style="display:block;width:80px;background:#00FF00;">A</a>

that will fix it all.

Andy Matthews wrote:

That's a LOT of markup.

You could actually use an input field if you just want to set a background color an some text. It might look like this:

<input type="text" name="name" style="width: 100px;" /> <input type="text" name="name" value="some text" style="width:

80px;background: #ff0000; border: 0px;height: 20px;" />

-----Original Message-----

From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Hector Virgen

Sent: Friday, November 07, 2008 10:30 AM
To: jquery-en@googlegroups.com

Subject: [jQuery] Re: span tag is width:80px but is only showing the width of contents?

Wrap the input in a div with and set the div's position to relative.

Then, add the span as as a div, set the width, and position it absolutely.
Its absolute position will be relative to the container div, not the page.

<div style="position: relative;">
    <input type="text" name="name" style="width: 100px;" />
    <div style="position: absolute; left: 100px; top: 0px; width:
90px;">test</div> </div>


-Hector

On Fri, Nov 7, 2008 at 8:04 AM, nmiddleweek <[EMAIL PROTECTED]>

wrote:



        Yes that works...
        
        What I'm trying to do is display a SPAN atg at the end of an Input
        text field of a fixed size. If I set the display to block, it is
        forcing itself to be on the next line.
        
        Have you got any idea on how I can do this?
        
        
        Cheers,
        Nick
        


        On Nov 7, 3:48 pm, mbraybrook <[EMAIL PROTECTED]> wrote:
        > try:

> <span style="width:80px; background-color:#00FF00; display:block;">A</

        > span>
        >
        > Does that work?
        >
        > M
        >
        > On Nov 7, 3:45 pm, nmiddleweek <[EMAIL PROTECTED]> wrote:
        >
        > > Hello,
        >
        > > I've got a SPAN tag which is set to 80px...
        >
        > > <span style="width:80px; background-color:#00FF00;">A</span>
        >
        > > The contents of the SPAN is a single character and when rendered

on

> > screen, the green SPAN is showing as only approx 15 pixels in width.

        >
        > > How can I force the width to be 80px?
        >
        > > Thanks,
        > > Nick