Question

我正在Squarespace中建立一个网站，并且正在使用代码块添加自定义样式的文本块。它包含一个h2，h3和一个无序列表。

尽管我试图使h3和无序列表在列中保持平衡和对齐，但h2仍位于div的中心。我提供了指向我的问题的链接：https://jsfiddle.net/5k4mo3fn/29/

我对HTML和CSS还是比较陌生，所以很抱歉，如果这很容易解决。我已经做了一些进一步的研究，但找不到合适的解决方案。我正在使用Google Chrome。

我尝试通过此问题添加代码：

    <div style="background-color: #98CB52; padding: 25px; border-left: 6px solid #19764A; column-count: 2; column-fill: balance;">

https://jsfiddle.net/5k4mo3fn/29/

基本上，我希望h3和所有项目符号点彼此对齐。

Answer 1

# Load data def load_ticket_data(): df = pd.read_csv( 'wolfsburg/tickets_ticket.csv', usecols=['created', 'start_at'], parse_dates=['created', 'start_at'], ) return df tickets = load_ticket_data() test = pd.to_datetime(tickets['created'], format='%y/%m/%d') print(test)标记在默认情况下具有一些ul。减少填充将使列表与标题对齐。

我已将padding添加到padding-left: 20px标记中。

JsFiddle link

Answer 2

您也可以使用css grid layout来获得结果。

JSFiddle

.main {
  background-color: #98CB52;
}

.title {
  padding: 1em;
}

.content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1em;
  place-items: center;
}

.m-0 {
  margin: 0;
}

<div class="main">
  <div class="title">
    <h2 style="color: white; text-align: center; column-span: all;" class="m-0">What impact can I have?</h2>
  </div>
  <div class="content">
    <div>
      <h3 style="color: white;margin-left: 40px;" class="m-0">For corporations</h3>
      <ul style="color: white;">
        <li>Share neurodiverse practices, pitfalls and pivot points</li>
        <li>Learn how to design for diversity and retain quality staff</li>
        <li>Promote neurodiversity at work</li>
        <li>Sponsor summits or projects, gain exposure and connections</li>
        <li>Liaise with other executives and leading corporations in the field</li>
      </ul>
    </div>

    <div>
      <h3 style="color: white;margin-left: 40px;" class="m-0">For neurodiverse individuals</h3>
      <ul style="color: white;">
        <li>Share lived experience to bolster positive social change</li>
        <li>Learn employability skills</li>
        <li>Promote neurodiverse advocacy</li>
        <li>Be seen and valued for your neurodiversity</li>
        <li>Access beneficial resources</li>
        <li>Connect with employers, researchers and the community</li>
      </ul>
    </div>
  </div>
</div>

如何使用css

2 个答案: