多個項目同一行

我對一些html代碼有一個小問題。我正在嘗試爲閃光發行說明創建示例文檔，因此我創建了一些包含「固定」，「添加」或「改進」的突出顯示的框，然後在右側顯示發佈說明。相反的情況是，'something'這個詞會像新的項目一樣被推到一個新的行上，但是一開始就沒有這個小點。有沒有辦法將它推到與盒子相同的行？多個項目同一行

這是我到目前爲止有：

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

來源

2013-10-30 ruben1691

變化顯示：塊上顯示：inline-block的

來源

2013-10-30 12:30:56

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

來源

2013-10-30 12:30:56 offthat

換出display:block爲display:inline-block

JSFiddle

來源

2013-10-30 12:31:24

.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-30 12:32:38 Era

請訪問以下鏈接Demo

你必須在CSS中添加像

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

來源

2013-10-30 12:43:36 krutssss

使用inline-block的 [刪除垃圾郵件鏈接]

來源

2013-10-30 13:13:24

你能提供更多信息嗎？這個答案不是很有幫助。 – Theresa

該鏈接根本沒有回答這個問題，它只是垃圾郵件。沒有它（我把它刪除），答案只有很少的內容，它應該是一個評論。 – CBroe

多個項目同一行

回答

相關問題