How do I set dynamic width to a block element?


Tags: html,css

Problem :

I have 30 elements with class .lollipop that has line-height: 30px; height: 30px;.

<a class="lollipop">Random text</a>
<a class="lollipop">Random text longer</a>
<a class="lollipop">Short</a>
...

How do I write the CSS to have dynamic width (their width adapt based on how much text is there inside them, like it usually is) and have only one of these elements per line, possibly without adding other HTML elements?



Solution :

Possibly the easiest way is:

a {
    float: left;
    clear: left;
}

With this, you don't have to change the HTML.


    CSS Howto..

    CSS how to make 100% height in this case

    How to set DIV's width based on CSS indexes

    How to select XML element by xlink:href attribute with CSS?

    How to use mapbox.js as a background so that html content and Navbar stay visible on top?

    how do I give partition in the
    tag?

    jQuery hide / show class not changing css for future added elements

    How to align list items

    How to toggle a separate drop down beneath a grid of items using JQuery?

    how do I select a single tag in the middle of many of the same in CSS?

    How to force div element to keep its contents inside container

    Django + Mac osx how to use less css?

    How to add JS and CSS file in web page based on parameter?

    How to put a canvas on an image?

    how to resize images inside a div inside another div with css?

    How to dynamically import javascript and css files

    How do I set jQuery accordion default to unopened? And toggle open/closed?

    How to remove the vertical white line between the two green divs without floating?

    How do I get a div that appears on hover to overlap all others, without using absolute positioning?

    How do I use Parent page to get attributes for wp_nav_menu buttons?

    Displaying a title and description on a jquery slideshow

    How to append text after last css class

    How to keep images fixed but also responsive so they don't overlap

    How to create CSS heart? / Why is this CSS creating a heart shape?

    How to route requests in codeigniter so we can serve static css, js and img files?

    JQUERY - Tabs - show all div content in date-filter

    Window resize shifts buttons to the bottom of the page. How to fix the css in this page?

    How to apply css, after Jquery adds a class?

    How do horizontally align text next to an image with CSS

    How to Progressively highlight a chunk of text using jquery/js/css

    How can I stop my submenu from disappearing while hovering between spaced submenu items?