我想在我的网站顶部有一个logobar。 我希望这是一个简单的文本,旁边有一个图像。
我正在使用以下代码,但图片显示在文本下方。 我正在使用一个div,它在列表中包含文本和图像,我已将其设置为内联,但它们不会显示在一行中。
<doctype! html>
<html>
<head>
<title> Breaditt </title>
<style>
html, body {
font-family: sans-serif;
margin: 0;
padding: 0; }
#logobar {
background: rgb(206, 211, 255);
display: inline-block; }
#logobar ul {
list-style-type: none;
margin: 0; }
#logobar li {
display: inline; }
#logobar p {
font-size: 18;
font-family: Comic sans MS; }
</style>
</head>
<body>
<div id="logobar">
<ul>
<li><p> Breaditt </p></li>
<li><img src="img/logo.jpg" alt="breaditt cat" width="100" height="100"></li>
</ul>
</div>
</body>
</html>
答案 0 :(得分:0)
您应该删除文字周围的段落。该段落是块元素,它将打破这一行:
<div id="logobar">
<ul>
<li>Breaditt</li>
<li><img src="img/logo.jpg" alt="breaditt cat" width="100" height="100"></li>
</ul>
</div>
另一种选择是内联该段落:
#logobar p {
font-size: 18;
font-family: Comic sans MS;
display: inline;
}
答案 1 :(得分:0)
答案 2 :(得分:0)
无需使用列表。尝试:
<div id="logobar">
<p> Breaditt </p>
<img src="img/logo.jpg" alt="breaditt cat" width="100" height="100">
</div>
使用CSS:
#logobar>* {
display: inline; }