html css alignment
I am trying to align an image and some text together. If you refer the below code there will be and image and some text( Name and Age) I want both of them to be next to each other. I did try float: left but still no luck.
Thanks
<!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' xml:lang='en'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<title></title>
<style>
img {
height: 10p开发者_如何转开发x;
width: 20px;
}
ul li{
display:block;
}
ul {
margin: 0;
float: left;
}
#container {
margin: 10px
}
</style>
</head>
<body>
<div id="container">
<p>
<img src="cat.jpg"> <ul><li>Source</li><li>Item Link Title</li> </ul> </p>
</div>
</body>
</html>
Technically your HTML is invalid. A list is a block level element and you can't (or shouldn't) embed then in paragraphs since they should only take inline elements.
There is no Name and Age mentioned anywhere in your markup so I'm not sure what you're referring to there.
Edit: to put the image on the left and have the two labels on the right one above the other, use this markup:
<div id="container">
<img src="cat.jpg">
<ul>
<li>Source</li>
<li>Item Link Title</li>
</ul>
</div>
and either this CSS:
html, body, div, ul, li, img { padding: 0; margin: 0; border: 0 none; }
#container { background: yellow; overflow: hidden; float: left; }
#container img { float: left; }
#container ul { list-style-type: none; float: left; background: green; }
The float: left on the container is optional. It simply means that it isn't as wide as its container. The first line is a crude reset CSS. I'd suggest using a real CSS and a DOCTYPE always.
You can't put an unordered list inside of a paragraph (well you can but it's not valid). I don't know exactly what you're trying to do but see if this helps:
<!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' xml:lang='en'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<title></title>
<style type="text/css">
img {
height: 10px;
width: 20px;
}
ul li{
display:inline;
}
ul {
display:inline;
}
#container {
margin: 10px
}
</style>
</head>
<body>
<div id="container">
<img src="la.jpg" alt=""/> <ul><li>Source</li><li>Item Link Title</li> </ul>
</div>
</body>
</html>
smallest change to your 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' xml:lang='en'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<title></title>
<style>
img {
height: 10px;
width: 20px;
}
ul li{
display:block;
}
ul {
margin: 0;
padding-left:0;
}
#container {
margin: 10px
}
</style>
</head>
<body>
<div id="container">
<p>
<img src="cat.jpg"> <ul><li>Source</li><li>Item Link Title</li> </ul> </p>
</div>
</body>
</html>
Having said that, the other 2 are correct. lists really shouldn't be inside a paragraph if you want to be HTML strict.
加载中,请稍侯......
精彩评论