Question

我正在使用小部件。它生成一个自动的html元素，我需要自己更改每个单独的CSS。

正如您在剪切代码中看到的那样，我尝试了在一行中显示两个span元素的内容。但是如果第一个元素包含长句子，那么第二个span不会被第一个元素的宽度排列。我怎么设置它？

.remove-dot {
  list-style-type: none;
}

.display-list-item {
  display: list-item
}

<span class="remove-dot display-list-item">test</span>
<span class="remove-dot display-list-item" style="margin-top: -17px; margin-left: 35px;">another span</span>
<br />
<span class="remove-dot display-list-item">second first span with long width</span>
<span class="remove-dot display-list-item" style="margin-top: -17px; margin-left: 35px;">another span</span>

Answer 1

您可以删除

.display-list-item {
  display: list-item
}

或者，如果您无法删除它，您可以像评论中已经提到的Banzay一样进行更改。

display: inline-block;

然后你的跨度就像这里一样：

.remove-dot {
  list-style-type: none;
}

<span class="remove-dot display-list-item">test</span>
<span class="remove-dot display-list-item" style="margin-top: -17px; margin-left: 35px;">another span</span>
<br />
<span class="remove-dot display-list-item">second first span with long width</span>
<span class="remove-dot display-list-item" style="margin-top: -17px; margin-left: 35px;">another span</span>

Answer 2

你看起来像这样吗？

   

 div{
        float:left;
    }
    .remove-dot {
      list-style-type: none;
    }

  

 <div>
    <span class="remove-dot display-list-item">test1</span></br>
<span class="remove-dot display-list-item">second first span with long width</span>
   </div> 
<div>
    <span class="remove-dot display-list-item" style="margin-top: -17px; margin-left: 35px;">test2</span></br>
    <span class="remove-dot display-list-item" style="margin-top: -17px; margin-left: 35px;">another span</span>
</div>

根据第一个项目宽度设置第二个项目margin-left

2 个答案: