如何缩小 CSS 中的文本？

Question

我是 HTML&CSS 的初学者，现在我正在编写我的第一个项目。但我有点难以缩小无序列表的范围。我附上了照片，展示了它的外观和实际外观。如果你能帮助我，我会很高兴。

它看起来应该是什么样子：

#tribute-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#tribute-description {
  font-size: 18px;
}

li {
  font-size: 16px;
}

<div id="tribute-info">
  <h3 id="tribute-description">
    Here's a time line of Dr. Borlaug's life:
  </h3>
  <ul>
    <li><strong>1914</strong> - Born in Cresco, Iowa</li>
    <li>
      <strong>1933</strong> - Leaves his family's farm to attend the University of Minnesota, thanks to a Depression era program known as the "National Youth Administration"
    </li>
    <li>
      <strong>1935</strong> - Has to stop school and save up more money. Works in the Civilian Conservation Corps, helping starving Americans. "I saw how food changed them", he said. "All of this left scars on me."
    </li>
    <li>
      <strong>1937</strong> - Finishes university and takes a job in the US Forestry Service
    </li>
    <li>
      <strong>1938</strong> - Marries wife of 69 years Margret Gibson. Gets laid off due to budget cuts. Inspired by Elvin Charles Stakman, he returns to school study under Stakman, who teaches him about breeding pest-resistent plants.
    </li>
    <li>
      <strong>1941</strong> - Tries to enroll in the military after the Pearl Harbor attack, but is rejected. Instead, the military asked his lab to work on waterproof glue, DDT to control malaria, disinfectants, and other applied science.
    </li>
    <li>
      <strong>1942</strong> - Receives a Ph.D. in Genetics and Plant Pathology
    </li>
    <li>
      <strong>1944</strong> - Rejects a 100% salary increase from Dupont, leaves behind his pregnant wife, and flies to Mexico to head a new plant pathology program. Over the next 16 years, his team breeds 6,000 different strains of disease resistent
      wheat - including different varieties for each major climate on Earth.
    </li>
    <li>
      <strong>1945</strong> - Discovers a way to grown wheat twice each season, doubling wheat yields
    </li>
    <li>
      <strong>1953</strong> - crosses a short, sturdy dwarf breed of wheat with a high-yeidling American breed, creating a strain that responds well to fertilizer. It goes on to provide 95% of Mexico's wheat.
    </li>
    <li>
      <strong>1962</strong> - Visits Delhi and brings his high-yielding strains of wheat to the Indian subcontinent in time to help mitigate mass starvation due to a rapidly expanding population
    </li>
    <li><strong>1970</strong> - receives the Nobel Peace Prize</li>
    <li>
      <strong>1983</strong> - helps seven African countries dramatically increase their maize and sorghum yields
    </li>
    <li>
      <strong>1984</strong> - becomes a distinguished professor at Texas A&M University
    </li>
    <li>
      <strong>2005</strong> - states "we will have to double the world food supply by 2050." Argues that genetically modified crops are the only way we can meet the demand, as we run out of arable land. Says that GM crops are not inherently dangerous
      because "we've been genetically modifying plants and animals for a long time. Long before we called it science, people were selecting the best breeds."
    </li>
    <li><strong>2009</strong> - dies at the age of 95.</li>
  </ul>
</div>

Answer 1

您可以将

中并像这样居中：

.list {
  max-width: 700px;
  margin: 0 auto;
}

.list li {
  margin-bottom: 1em;
}

<div class="list">
  <ul>
    <li>Your list here</li>
    <li>Your list here</li>
    <li>Your list here</li>
    <li>Your list here</li>
    <li>Your list here</li>
  </ul>
</div>

Answer 2

只需添加一个 CSS 规则来限制 ul 的宽度。您可以为此使用 class 或 ul 上的 ID，或者使用这样的子选择器：

#tribute-info > ul {
  max-width: 400px;
}

（这适用于任何 ul，它是直接子元素 ot #tribute-info 元素 - 在您的情况下仅 one，即那个列表）

#tribute-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#tribute-description {
  font-size: 18px;
}

li {
  font-size: 16px;
}

#tribute-info > ul {
  max-width: 400px;
}

<div id="tribute-info">
  <h3 id="tribute-description">
    Here's a time line of Dr. Borlaug's life:
  </h3>
  <ul>
    <li><strong>1914</strong> - Born in Cresco, Iowa</li>
    <li>
      <strong>1933</strong> - Leaves his family's farm to attend the University of Minnesota, thanks to a Depression era program known as the "National Youth Administration"
    </li>
    <li>
      <strong>1935</strong> - Has to stop school and save up more money. Works in the Civilian Conservation Corps, helping starving Americans. "I saw how food changed them", he said. "All of this left scars on me."
    </li>
    <li>
      <strong>1937</strong> - Finishes university and takes a job in the US Forestry Service
    </li>
    <li>
      <strong>1938</strong> - Marries wife of 69 years Margret Gibson. Gets laid off due to budget cuts. Inspired by Elvin Charles Stakman, he returns to school study under Stakman, who teaches him about breeding pest-resistent plants.
    </li>
    <li>
      <strong>1941</strong> - Tries to enroll in the military after the Pearl Harbor attack, but is rejected. Instead, the military asked his lab to work on waterproof glue, DDT to control malaria, disinfectants, and other applied science.
    </li>
    <li>
      <strong>1942</strong> - Receives a Ph.D. in Genetics and Plant Pathology
    </li>
    <li>
      <strong>1944</strong> - Rejects a 100% salary increase from Dupont, leaves behind his pregnant wife, and flies to Mexico to head a new plant pathology program. Over the next 16 years, his team breeds 6,000 different strains of disease resistent
      wheat - including different varieties for each major climate on Earth.
    </li>
    <li>
      <strong>1945</strong> - Discovers a way to grown wheat twice each season, doubling wheat yields
    </li>
    <li>
      <strong>1953</strong> - crosses a short, sturdy dwarf breed of wheat with a high-yeidling American breed, creating a strain that responds well to fertilizer. It goes on to provide 95% of Mexico's wheat.
    </li>
    <li>
      <strong>1962</strong> - Visits Delhi and brings his high-yielding strains of wheat to the Indian subcontinent in time to help mitigate mass starvation due to a rapidly expanding population
    </li>
    <li><strong>1970</strong> - receives the Nobel Peace Prize</li>
    <li>
      <strong>1983</strong> - helps seven African countries dramatically increase their maize and sorghum yields
    </li>
    <li>
      <strong>1984</strong> - becomes a distinguished professor at Texas A&M University
    </li>
    <li>
      <strong>2005</strong> - states "we will have to double the world food supply by 2050." Argues that genetically modified crops are the only way we can meet the demand, as we run out of arable land. Says that GM crops are not inherently dangerous
      because "we've been genetically modifying plants and animals for a long time. Long before we called it science, people were selecting the best breeds."
    </li>
    <li><strong>2009</strong> - dies at the age of 95.</li>
  </ul>
</div>

Answer 3

Michael，Lee Taylor 的回答很好，如果您不希望 div 元素包裹列表，您可以直接将“列表”class 应用于元素：

<ul class="list">
    <li>Your list here</li>
    <li>Your list here</li>
    <li>Your list here</li>
    <li>Your list here</li>
    <li>Your list here</li>
</ul>

此外，您必须确保将无序列表包装在比元素更宽的容器中。

如何缩小 CSS 中的文本？

How to narrow text in CSS?

html

css

html-lists

flexbox