0

Web サイトの上部に配置したいロゴバーがあります。これを、横に画像があるシンプルなテキストにしたい。

次のコードを使用していますが、画像はテキストの下に表示されます。インラインに設定したリストにテキストと画像の両方を含む div を使用していますが、それらは 1 行に表示されません。

<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>
4

3 に答える 3

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;
}
于 2013-04-24T17:09:44.293 に答える
0

変化する：

#logobar li {
    display: inline;
}

に

#logobar li {
    float: left;
}

jsFiddle の例

于 2013-04-24T17:10:02.167 に答える
0

リストを使用する必要はありません。試す：

<div id="logobar">
   <p> Breaditt </p>
   <img src="img/logo.jpg" alt="breaditt cat" width="100"     height="100">
</div>

CSSで：

#logobar>* {
display: inline; }

例

于 2013-04-24T17:13:14.990 に答える