inline list inside h3 CSS Question

Question inline list inside h3 ( SitePoint Forums CSS )
Updated: 2008-11-23 03:50:02 (5)

inline list inside h3

How can I make it so that an inline list is level or on the same line as an <h3> tag? I need for it to be on the same line

Answers: inline list inside h3 ( SitePoint Forums CSS )

inline list inside h3

Hi Ian,
Assuming your list is also display:inline

Code:

h3 {display:inline}

Or float the h3 and the inline list .

Would need to see the code you are using to give exact code etc

Paul

Paul O'B

inline list inside h3

Heh, I see, well I am trying to do this:

Code:

  <style>
  h3 {
    border-bottom: 1px solid #000000;
    text-align: left;
    font-face: Arial, Helvetica, Verdana, Sans-serif;
    font-size: 11pt;
    padding-bottom: 2px;
    padding-top: 4px;
    margin: 0 0 2px 0;
    }
  .crumbs li {
    display: inline;
    }
  </style>
  <body>
  <h3>Current Location:<ul class="crumbs"><li>Home</li><li>News</li></h3>
  </body>

The problem being, that since the h3 has a top and bottom border, I want the list to stay inline with it at the small font height and not go to a new line and be indented. Thus spacing out the h3.

Ian R. Gordon

inline list inside h3

*bump*

Ian R. Gordon

inline list inside h3

Hi Ian,

Sorry I didn't reply earlier but I've been out most of the weekend.

You can't nest a list inside of and h3 because it isn't valid. Only naturally inline elements can go inside. You'll have to do something like this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
  #crumbs {
	  border-bottom: 1px solid #000000;
  }
  h3 {
	text-align: left;
	font-face: Arial, Helvetica, Verdana, Sans-serif;
	font-size: 11pt;
	padding-bottom: 2px;
	padding-top: 4px;
	margin: 0 0 2px 0;
	display:inline;
 }
  #crumbs ul, #crumbs li {
	display: inline;
	}
  </style>
</head>
<body>
<div id="crumbs">
<h3>Current Location:</h3>
<ul><li>Home</li><li>News</li></ul>
</div>
</body>
</html>

Paul

Paul O'B

inline list inside h3

Duely noted, thanks!

Ian R. Gordon

- Source: inline list inside h3 SitePoint Forums CSS
- Previous Question: A few issues SitePoint Forums CSS
- Next Question: Practical joke played on Palin Physics Help and Math Help - Physics Forums General Discussion