0

一部の HTML コードで小さな問題が発生しています。Sparkle リリース ノートのサンプル ドキュメントを作成しようとしているので、「修正」、「追加」、または「改善」のいずれかを含む強調表示されたボックスをいくつか作成し、右側にリリース ノートを配置する必要があります。代わりに、「何か」という単語が新しいアイテムのように新しい行にプッシュされますが、先頭にドットはありません。ボックスと同じラインに押し上げる方法はありますか??

これは私がこれまでに持っているものです:

索引.html

<!DOCTYPE HTML>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<title>Release Notes</title>

<body>
    <ul>
    <li><span class='fixed-square'>Fixed</span>Something</li>
    <li><span class='added-square'>Added</span></li>
    <li><span class='improved-square' >Improved</span></li>
</ul>   
</body>

スタイル.css

.fixed-square {
    background-color: #0f0;
    color: white;
    display: block;
    height: 20px;
    width: 60px;
    border-radius: 5px;
    line-height: 20px;
    text-align: center;
}

.added-square {
    background-color: red;
    color: white;
    display: block;
    height: 20px;
    width: 60px;
    border-radius: 5px;
    line-height: 20px;
    text-align: center;
}

.improved-square {
    background-color: blue;
    color: white;
    display: block;
    height: 20px;
    width: 80px;
    border-radius: 5px;
    line-height: 20px;
    text-align: center;
}


body {
    font-family: Verdana;
    font-size: 10pt;
}

前もって感謝します！

編集：迅速な回答をありがとうございました。要約すると、私はこれから行きました：

.improved-square {
    background-color: blue;
    color: white;
    display: block;
    height: 20px;
    width: 80px;
    border-radius: 5px;
    line-height: 20px;
    text-align: center;
}

これに：

.improved-square {
    background-color: blue;
    color: white;
    display: inline-block;  <----------
    height: 20px;
    width: 80px;
    border-radius: 5px;
    line-height: 20px;
    text-align: center;
}
4

6 に答える 6

0

inline-block を使用 [スパム リンクを削除]

于 2013-10-30T13:13:24.973 に答える
0 
.fixed-square {
    background-color: #0f0;
    color: white;
    display: block; // this is actually sending something in second line try adding display: inline-block;
    height: 20px;
    width: 60px;
    border-radius: 5px;
    line-height: 20px;
    text-align: center;
}
于 2013-10-30T12:32:38.050 に答える
0

このリンクのデモをご覧ください

のようなcssを追加する必要があります

   ul li
   {
     display:inline;
     float : left;
     margin :5px;
   }
于 2013-10-30T12:43:36.683 に答える