5 replies [Last post]
gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 3 years 12 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Untitled</title>
        <link rel="stylesheet" href="css/style.css">
        <link rel="author" href="humans.txt">
        <style>
			*{
				padding: 0;
				margin: 0;
			}
 
			nav {
				height: 30px;
				background: #000;
				color: #fff;
			}
 
			ul {
				background: tomato;
				width:  // hey ul i just wnt you to be the width of whatever content i insert in u. 
				// also i don't want to give you a fixed width 
			}
			ul li{
				display: inline-block;
			}
        </style>
    </head>
    <body>
 
        <nav>
        	<ul>
        		<li>hello</li>
        		<li>hello</li>
        		<li>hello</li>
        	</ul>
        </nav>
 
 
        <script src="js/main.js"></script>
    </body>
</html>

hey guys i have a look at the code above , now how do i make the

    , the size of whatever content it holds rather then it take 100% width , i know its a block element , also at the same time , i don't want to give the ul a fixed width .

Thnk you.

Gautam.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 7 hours 4 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

Shrink-wrap

Set the display property to inline-block, or table. Either will cause the element to shrink-wrap its content. Another means is to float the element.

One drawback that may require some fiddling is that different browsers may be more or less aggressive about how tightly they squeeze.

In your example, you could set

ul {
  white-space: nowrap;
  }
 
li {
  white-space: normal; /*white-space is inherited*/
  }

Another approach is to set a min-width on your ul.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 3 years 12 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

Thanks

Thanks gary the genious !

gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 3 years 12 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

Does't work :(((((((((

gary heres the code i tried in chrome and moz , but it does't work :

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Untitled</title>
        <link rel="stylesheet" href="css/style.css">
        <link rel="author" href="humans.txt">
        <style>
			*{
				padding: 0;
				margin: 0;
			}
 
			nav {
				height: 30px;
				background: #000;
				color: #fff;
			}
 
			ul {
				background: tomato;
				white-space: nowrap;
			}
			ul li{
				display: inline-block;
				white-space: normal;
			}
        </style>
    </head>
    <body>
 
        <nav>
        	<ul>
        		<li>hello</li>
        		<li>hello</li>
        		<li>hello</li>
        	</ul>
        </nav>
 
 
        <script src="js/main.js"></script>
    </body>
</html>

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 7 hours 4 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

You didn't apply any of the suggested fixes

ul {
				background: tomato;
				white-space: nowrap;
			}
That was for dealing with the effects of shrink-wrapping. But you did nothing to affect the shrink.

gary wrote:

Set the display property to inline-block, or table. Either will cause the element to shrink-wrap its content. Another means is to float the element.

g

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

VeeraM
VeeraM's picture
Offline
Enthusiast
bangalore
Last seen: 4 years 8 weeks ago
bangalore
Timezone: GMT+5.5
Joined: 2014-09-22
Posts: 59
Points: 59

ul

Hi,it is an responsive navigation menu so width mentioned in percentage height are not mention it.
nav {
display: table;
table-layout: fixed;
width: 100%;
}