0

我对一些 html 代码有一个小问题。我正在尝试为 sparkle 发行说明创建一个示例文档，因此我创建了一些突出显示的框，其中包含“fixed”、“add”或“improved”，然后在右侧应该是发行说明。相反，“某事”这个词会像一个新项目一样被推到一个新行上，但开头没有点。有没有办法把它和盒子推到同一条线上？？

这是我到目前为止所拥有的：

索引.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

3

更改显示：显示块：inline-block

于 2013-10-30T12:30:56.573 回答
1

换掉display:blockfordisplay:inline-block

JSFiddle

于 2013-10-30T12:31:24.727 回答
1

使用display: inline-block;而不是display: block;.

于 2013-10-30T12:30:56.763 回答
0

使用 inline-block [删除垃圾邮件链接]

于 2013-10-30T13:13:24.973 回答
0

请看这个链接演示

你必须添加像

   ul li
   {
     display:inline;
     float : left;
     margin :5px;
   }
于 2013-10-30T12:43:36.683 回答
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 回答