CSS專案符號對齊但現在浮動

如何將 CSS 專案符號與外部文本對齊但保持文本顯示為塊？

這是我嘗試過的，但他們都沒有做我想要的。

.list_container {
  max-width:300px;
  text-align:left;
  margin:10px 10px;
  font-size:12px;
}

.list_container ul {
 lit-style-type:disc;
 padding:0;
 margin:0;
}

.list_span {
  display:inline-block;
}

.list_span2 {
  padding-left:5px;
}

<div class="list_container">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    <ul style="list-style-position:outside;">
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
    </ul>
</div>

<hr/>

<div class="list_container">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    <ul style="list-style-position:inside;">
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
    </ul>
</div>

<hr/>

<div class="list_container">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    <ul style="list-style-position:inside;">
        <li><span class="list_span">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></li>
        <li><span class="list_span">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></li>
        <li><span class="list_span">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></li>
    </ul>
</div>

<hr/>

<div class="list_container">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    <ul style="list-style-position:inside;">
        <li><span class="list_span2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></li>
        <li><span class="list_span2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></li>
        <li><span class="list_span2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></li>
    </ul>
</div>

我想要實作的是：

uj5u.com熱心網友回復：

使用- 我padding-left使用ul0.8em 作為值：

.list_container {
  max-width:300px;
  text-align:left;
  margin:10px 10px;
  font-size:12px;
}

.list_container ul {
 list-style-type:disc;
 padding-left:0.8em;
 
}

.list_span {
  display:inline-block;
}

.list_span2 {
  padding-left:5px;
}

<div class="list_container">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    <ul style="list-style-position:outside;">
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
    </ul>
</div>

<hr/>

<div class="list_container">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    <ul style="list-style-position:inside;">
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
    </ul>
</div>

<hr/>

<div class="list_container">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    <ul style="list-style-position:inside;">
        <li><span class="list_span">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></li>
        <li><span class="list_span">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></li>
        <li><span class="list_span">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></li>
    </ul>
</div>

<hr/>

<div class="list_container">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    <ul style="list-style-position:inside;">
        <li><span class="list_span2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></li>
        <li><span class="list_span2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></li>
        <li><span class="list_span2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></li>
    </ul>
</div>

uj5u.com熱心網友回復：

一種解決方案是給那些li'sa 類（我稱之為它.left）并使用::beforepsuedo 來調整間距。它應該看起來像這樣：

li.left::before {
  content: "";
  margin-left: -.6em;
}

在這里看到它：

.list_container {
  max-width: 300px;
  text-align: left;
  margin: 10px 10px;
  font-size: 12px;
}

.list_container ul {
  lit-style-type: disc;
  padding: 0;
  margin: 0;
}

.list_span2 {
  padding-left: 5px;
}

.list_span {
  display: inline-block;
}

li.left::before {
  content: "";
  margin-left: -.6em;
}

<div class="list_container">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    <ul style="list-style-position:outside;">
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
    </ul>
</div>

<hr/>

<div class="list_container">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    <ul style="list-style-position:inside;">
        <li class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
        <li class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
        <li class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
    </ul>
</div>

<hr/>

<div class="list_container">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    <ul style="list-style-position:inside;">
        <li><span class="list_span">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></li>
        <li><span class="list_span">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></li>
        <li><span class="list_span">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></li>
    </ul>
</div>

<hr/>

<div class="list_container">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    <ul style="list-style-position:inside;">
        <li><span class="list_span2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></li>
        <li><span class="list_span2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></li>
        <li><span class="list_span2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></li>
    </ul>
</div>

uj5u.com熱心網友回復：

為了絕對確保無論字體大小和其他間距我們需要自己定位光碟，您都能對齊。

此代碼段通過洗掉默認瀏覽器樣式并通過其 Unicode 字符將光碟放在 before 偽元素中來實作此目的。

li 元素有一個邊距（在這個演示中是 1em，但它可以是你想要的任何東西），而偽元素的邊距是負數。

.list_container {
  max-width: 300px;
  text-align: left;
  margin: 10px 10px;
  font-size: 12px;
}

.list_container ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  margin-left: 1em;
}

.list_container ul li {
  position: relative;
}

.list_container ul li::before {
  content: '\2022';
  position: absolute;
  margin-left: -1em;
}

<div class="list_container">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  <ul style="list-style-position:outside;">
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
  </ul>
</div>

標籤：css html 列表

上一篇：框和文本問題

下一篇：如何對齊網格不同列中的內容