在CSS中，將ul元素橫向排列在div中是一個常見的需求，以下是一些實現(xiàn)這一功能的方法：

1、使用CSS的display: flex屬性：

Flexbox是一個強大的布局工具，可以輕松地將子元素橫向排列，只需將div元素的display屬性設(shè)置為flex，然后設(shè)置ul元素的寬度為100%，子元素就會橫向排列。

2、使用CSS的float: left屬性：

將ul元素設(shè)置為左浮動，可以使其子元素橫向排列，但這種方法可能會導(dǎo)致其他元素浮動到錯誤的位置，因此使用時需謹(jǐn)慎。

3、使用CSS的grid-template-columns屬性：

CSS Grid是一個強大的布局系統(tǒng)，允許你定義多個列，將div元素設(shè)置為一個包含多個列的網(wǎng)格，然后將ul元素放在其中一個列中，子元素就會橫向排列。

4、使用HTML的style屬性：

直接在HTML元素中使用style屬性來設(shè)置樣式，你可以將ul元素的樣式設(shè)置為display: flex; list-style-type: none; padding: 0;來使其子元素橫向排列并去除列表樣式。

5、使用外部CSS文件：

將CSS樣式寫入外部CSS文件中，然后在HTML文件中引用該文件，這種方法可以使樣式更加模塊化和可維護。

示例代碼

以下是一個使用Flexbox實現(xiàn)橫向排列的例子：

<div style="display: flex;">
  <ul style="width: 100%; list-style-type: none; padding: 0;">
    <li>項目1</li>
    <li>項目2</li>
    <li>項目3</li>
  </ul>
</div>

或者，你可以使用CSS類來設(shè)置樣式：

<div class="flex-container">
  <ul class="flex-list">
    <li>項目1</li>
    <li>項目2</li>
    <li>項目3</li>
  </ul>
</div>

然后在CSS文件中設(shè)置樣式：

.flex-container {
  display: flex;
}
.flex-list {
  width: 100%;
  list-style-type: none;
  padding: 0;
}

注意事項

在使用浮動或Flexbox時，注意調(diào)整其他元素的樣式以確保布局的正確性。

避免在HTML中使用內(nèi)聯(lián)樣式，而是將樣式放在外部CSS文件中以提高代碼的可維護性。

在使用CSS Grid時，注意定義足夠的列來容納所有子元素。