Question

我遇到一些html代码的小问题。我正在尝试为闪光发行说明创建一个示例文档，因此我创建了一些突出显示的框，其中包含“固定”，“添加”或“改进”，然后在右侧应该发布说明。相反的是，“某事”一词被推到一个新线上，就像一个新项目，但开头没有点。有没有办法把它推到与盒子相同的线上？

这是我到目前为止所做的：

的index.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>

的style.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;
}

Answer 1

更改显示：显示屏上的块：内联块

Answer 2

使用display: inline-block;代替display: block;。

Answer 3

换出display:block

的display:inline-block

JSFiddle

Answer 4

.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;
}

Answer 5

请参阅此链接Demo

您必须添加css，如

   ul li
   {
     display:inline;
     float : left;
     margin :5px;
   }

Answer 6

使用内联块 [已删除垃圾邮件]

多个项目同一行

6 个答案: