2023年7月14日 03:38:55go评论65阅读模式

英文:

How can I achieve aligned word wrap with image inline?

问题

有可能创建响应式布局并正确设置自动换行以避免目前出现的不美观的换行吗？

图片是一个带有背景图像的 SPAN 元素，但我可以接受任何可以设置背景图像的元素。

唯一要保留的是 UL 和 LI 用于子类别。其他所有内容都可以使用适当的 HTML 元素。

.MainCategories {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}

.MainCategories>li {
  display: inline-block;
  max-width: 837px;
  max-width: 650px;
  vertical-align: top;
  margin: 20px;
  padding: 20px;
  border-radius: 20px;
  border: 1px solid rgba(167, 204, 63, 0.5);
}

.MainCategories>li>div.CatHead {
  white-space: nowrap;
}

.MainCategories>li>div.CatHead>a.PhotoFrame .Photo {
  display: inline-block;
  width: 100px;
  height: 75px;
  margin-right: 20px;
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
  border: 1px solid #ddd;
  vertical-align: middle;
  background-size: 100px 75px;
}

.MainCategories>li>div.CatHead>a.PhotoFrame:hover .Photo {
  opacity: 0.5;
}

.MainCategories>li>div.CatHead>a.ParentCat {
  vertical-align: middle;
  font-size: xx-large;
  color: #888;
  white-space: normal;
}

.MainCategories>li>div.CatHead>a.ParentCat:hover {
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.MainCategories>li>ul {
  list-style: none;
  margin-top: 20px;
}

.MainCategories>li>ul>li {
  display: inline-block;
  padding: 5px 0;
  vertical-align: middle;
}

.MainCategories>li>ul>li:before {
  display: inline-block;
  padding: 0 10px;
  vertical-align: bottom;
  line-height: 60%;
  content: "•";
  font-size: xx-large;
  color: #888;
}

.MainCategories>li>ul>li:first-child:before {
  content: "";
  padding: 0;
  font-size: 0;
  line-height: 0;
}

.MainCategories>li>ul>li>a {
  font-size: large;
  text-underline-offset: 3px;
}

<ul class="MainCategories">

  <li>
    <div class="CatHead">
      <a class="PhotoFrame" href="/en-us/categories/food"><span class="Photo" style="background-image:url(https://thevegcat.com/img/86460ca1-f14b-44ec-a96a-1aa47a3e39e8/small)"></span></a>
      <a class="ParentCat" href="/en-us/categories/food">Food (additional words to break)</a>
    </div>

    <ul>
      <li><a href="/en-us/categories/food/sweets">Sweets</a></li>
      <li><a href="/en-us/categories/food/sauces-spices">Sauces &amp; Spices</a></li>
      <li><a href="/en-us/categories/food/snacks-nibbles">Snacks &amp; Nibbles</a></li>
      <li><a href="/en-us/categories/food/ready-made-meals">Ready-made meals</a></li>
      <li><a href="/en-us/categories/food/spreads">Spreads</a></li>
      <li><a href="/en-us/categories/food/milk-cream-yogurt">Milk, cream, yogurt</a></li>
      <li><a href="/en-us/categories/food/semi-prepared-meals-and-mixtures">Semi-prepared meals and mixtures</a></li>
      <li><a href="/en-us/categories/food/bread-and-bakery-products">Bread and bakery products</a></li>
      <li><a href="/en-us/categories/food/cereal-flakes">Cereal Flakes</a></li>
      <li><a href="/en-us/categories/food/beverage">Beverage</a></li>
      <li><a href="/en-us/categories/food/baby-food">Baby Food</a></li>
    </ul>
  </li>
</ul>

这是我现在拥有的：

这是我想要的：

英文:

Is it possible to create responsive layout and have word wrap properly set to avoid these ugly line breaks that I have now?

Photo is SPAN element with background image but I'd accept any element that could have background image.

The only thing I want to keep is UL and LIs for subcategories. Everything else could be any of suitable HTML elements.

.MainCategories {
list-style: none;
margin: 0;
padding: 0;
text-align: left;
}
.MainCategories&gt;li {
display: inline-block;
max-width: 837px;
max-width: 650px;
vertical-align: top;
margin: 20px;
padding: 20px;
border-radius: 20px;
border: 1px solid rgba(167, 204, 63, 0.5);
}
.MainCategories&gt;li&gt;div.CatHead {
white-space: nowrap;
}
.MainCategories&gt;li&gt;div.CatHead&gt;a.PhotoFrame .Photo {
display: inline-block;
width: 100px;
height: 75px;
margin-right: 20px;
border-radius: 10px;
padding: 0;
overflow: hidden;
font-size: 0;
line-height: 0;
border: 1px solid #ddd;
vertical-align: middle;
background-size: 100px 75px;
}
.MainCategories&gt;li&gt;div.CatHead&gt;a.PhotoFrame:hover .Photo {
opacity: 0.5;
}
.MainCategories&gt;li&gt;div.CatHead&gt;a.ParentCat {
vertical-align: middle;
font-size: xx-large;
color: #888;
white-space: normal;
}
.MainCategories&gt;li&gt;div.CatHead&gt;a.ParentCat:hover {
text-decoration-thickness: 1px;
text-underline-offset: 4px;
}
.MainCategories&gt;li&gt;ul {
list-style: none;
margin-top: 20px;
}
.MainCategories&gt;li&gt;ul&gt;li {
display: inline-block;
padding: 5px 0;
vertical-align: middle;
}
.MainCategories&gt;li&gt;ul&gt;li:before {
display: inline-block;
padding: 0 10px;
vertical-align: bottom;
line-height: 60%;
content: &quot;•&quot;;
font-size: xx-large;
color: #888;
}
.MainCategories&gt;li&gt;ul&gt;li:first-child:before {
content: &quot;&quot;;
padding: 0;
font-size: 0;
line-height: 0;
}
.MainCategories&gt;li&gt;ul&gt;li&gt;a {
font-size: large;
text-underline-offset: 3px;
}

&lt;ul class=&quot;MainCategories&quot;&gt;
&lt;li&gt;
&lt;div class=&quot;CatHead&quot;&gt;
&lt;a class=&quot;PhotoFrame&quot; href=&quot;/en-us/categories/food&quot;&gt;&lt;span class=&quot;Photo&quot; style=&quot;background-image:url(https://thevegcat.com/img/86460ca1-f14b-44ec-a96a-1aa47a3e39e8/small)&quot;&gt;&lt;/span&gt;&lt;/a&gt;
&lt;a class=&quot;ParentCat&quot; href=&quot;/en-us/categories/food&quot;&gt;Food (additional words to break)&lt;/a&gt;
&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;/en-us/categories/food/sweets&quot;&gt;Sweets&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;/en-us/categories/food/sauces-spices&quot;&gt;Sauces &amp;amp; Spices&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;/en-us/categories/food/snacks-nibbles&quot;&gt;Snacks &amp;amp; Nibbles&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;/en-us/categories/food/ready-made-meals&quot;&gt;Ready-made meals&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;/en-us/categories/food/spreads&quot;&gt;Spreads&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;/en-us/categories/food/milk-cream-yoghurt&quot;&gt;Milk, cream, yoghurt&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;/en-us/categories/food/semi-prepared-meals-and-mixtures&quot;&gt;Semi-prepared meals and mixtures&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;/en-us/categories/food/bread-and-bakery-products&quot;&gt;Bread and bakery products&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;/en-us/categories/food/cereal-flakes&quot;&gt;Cereal Flakes&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;/en-us/categories/food/beverage&quot;&gt;Beverage&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;/en-us/categories/food/baby-food&quot;&gt;Baby Food&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;

This is what I have now

This is what I want

答案1

得分: 1

这似乎是一行代码。

更多关于flexbox的内容

.MainCategories {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
  max-width: 300px; /* 仅演示 */
}

.MainCategories>li {
  display: inline-block;
  max-width: 837px;
  max-width: 650px;
  vertical-align: top;
  margin: 20px;
  padding: 20px;
  border-radius: 20px;
  border: 1px solid rgba(167, 204, 63, 0.5);
}

.MainCategories>li>div.CatHead {
  display: flex; /* <---------------------------- 这里 */
}

.MainCategories>li>div.CatHead>a.PhotoFrame .Photo {
  display: inline-block;
  width: 100px;
  height: 75px;
  margin-right: 20px;
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
  border: 1px solid #ddd;
  vertical-align: middle;
  background-size: 100px 75px;
}

.MainCategories>li>div.CatHead>a.PhotoFrame:hover .Photo {
  opacity: 0.5;
}

.MainCategories>li>div.CatHead>a.ParentCat {
  vertical-align: middle;
  font-size: xx-large;
  color: #888;
  white-space: normal;
}

.MainCategories>li>div.CatHead>a.ParentCat:hover {
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.MainCategories>li>ul {
  list-style: none;
  margin-top: 20px;
}

.MainCategories>li>ul>li {
  display: inline-block;
  padding: 5px 0;
  vertical-align: middle;
}

.MainCategories>li>ul>li:before {
  display: inline-block;
  padding: 0 10px;
  vertical-align: bottom;
  line-height: 60%;
  content: "•";
  font-size: xx-large;
  color: #888;
}

.MainCategories>li>ul>li:first-child:before {
  content: "";
  padding: 0;
  font-size: 0;
  line-height: 0;
}

.MainCategories>li>ul>li>a {
  font-size: large;
  text-underline-offset: 3px;
}

<ul class="MainCategories">

  <li>
    <div class="CatHead">
      <a class="PhotoFrame" href="/en-us/categories/food"><span class="Photo" style="background-image:url(https://thevegcat.com/img/86460ca1-f14b-44ec-a96a-1aa47a3e39e8/small)"></span></a>
      <a class="ParentCat" href="/en-us/categories/food">Food (additional words to break)</a>
    </div>

    <ul>
      <li><a href="/en-us/categories/food/sweets">Sweets</a></li>
      <li><a href="/en-us/categories/food/sauces-spices">Sauces &amp; Spices</a></li>
      <li><a href="/en-us/categories/food/snacks-nibbles">Snacks &amp; Nibbles</a></li>
      <li><a href="/en-us/categories/food/ready-made-meals">Ready-made meals</a></li>
      <li><a href="/en-us/categories/food/spreads">Spreads</a></li>
      <li><a href="/en-us/categories/food/milk-cream-yoghurt">Milk, cream, yoghurt</a></li>
      <li><a href="/en-us/categories/food/semi-prepared-meals-and-mixtures">Semi-prepared meals and mixtures</a></li>
      <li><a href="/en-us/categories/food/bread-and-bakery-products">Bread and bakery products</a></li>
      <li><a href="/en-us/categories/food/cereal-flakes">Cereal Flakes</a></li>
      <li><a href="/en-us/categories/food/beverage">Beverage</a></li>
      <li><a href="/en-us/categories/food/baby-food">Baby Food</a></li>
    </ul>
  </li>
</ul>

英文:

Seems like this is a one-liner.

More on flexbox

.MainCategories {
list-style: none;
margin: 0;
padding: 0;
text-align: left;
max-width: 300px; /* demo only */
}
.MainCategories&gt;li {
display: inline-block;
max-width: 837px;
max-width: 650px;
vertical-align: top;
margin: 20px;
padding: 20px;
border-radius: 20px;
border: 1px solid rgba(167, 204, 63, 0.5);
}
.MainCategories&gt;li&gt;div.CatHead {
display: flex; /* &lt;---------------------------- HERE */
}
.MainCategories&gt;li&gt;div.CatHead&gt;a.PhotoFrame .Photo {
display: inline-block;
width: 100px;
height: 75px;
margin-right: 20px;
border-radius: 10px;
padding: 0;
overflow: hidden;
font-size: 0;
line-height: 0;
border: 1px solid #ddd;
vertical-align: middle;
background-size: 100px 75px;
}
.MainCategories&gt;li&gt;div.CatHead&gt;a.PhotoFrame:hover .Photo {
opacity: 0.5;
}
.MainCategories&gt;li&gt;div.CatHead&gt;a.ParentCat {
vertical-align: middle;
font-size: xx-large;
color: #888;
white-space: normal;
}
.MainCategories&gt;li&gt;div.CatHead&gt;a.ParentCat:hover {
text-decoration-thickness: 1px;
text-underline-offset: 4px;
}
.MainCategories&gt;li&gt;ul {
list-style: none;
margin-top: 20px;
}
.MainCategories&gt;li&gt;ul&gt;li {
display: inline-block;
padding: 5px 0;
vertical-align: middle;
}
.MainCategories&gt;li&gt;ul&gt;li:before {
display: inline-block;
padding: 0 10px;
vertical-align: bottom;
line-height: 60%;
content: &quot;•&quot;;
font-size: xx-large;
color: #888;
}
.MainCategories&gt;li&gt;ul&gt;li:first-child:before {
content: &quot;&quot;;
padding: 0;
font-size: 0;
line-height: 0;
}
.MainCategories&gt;li&gt;ul&gt;li&gt;a {
font-size: large;
text-underline-offset: 3px;
}

&lt;ul class=&quot;MainCategories&quot;&gt;
&lt;li&gt;
&lt;div class=&quot;CatHead&quot;&gt;
&lt;a class=&quot;PhotoFrame&quot; href=&quot;/en-us/categories/food&quot;&gt;&lt;span class=&quot;Photo&quot; style=&quot;background-image:url(https://thevegcat.com/img/86460ca1-f14b-44ec-a96a-1aa47a3e39e8/small)&quot;&gt;&lt;/span&gt;&lt;/a&gt;
&lt;a class=&quot;ParentCat&quot; href=&quot;/en-us/categories/food&quot;&gt;Food (additional words to break)&lt;/a&gt;
&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;/en-us/categories/food/sweets&quot;&gt;Sweets&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;/en-us/categories/food/sauces-spices&quot;&gt;Sauces &amp;amp; Spices&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;/en-us/categories/food/snacks-nibbles&quot;&gt;Snacks &amp;amp; Nibbles&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;/en-us/categories/food/ready-made-meals&quot;&gt;Ready-made meals&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;/en-us/categories/food/spreads&quot;&gt;Spreads&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;/en-us/categories/food/milk-cream-yoghurt&quot;&gt;Milk, cream, yoghurt&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;/en-us/categories/food/semi-prepared-meals-and-mixtures&quot;&gt;Semi-prepared meals and mixtures&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;/en-us/categories/food/bread-and-bakery-products&quot;&gt;Bread and bakery products&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;/en-us/categories/food/cereal-flakes&quot;&gt;Cereal Flakes&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;/en-us/categories/food/beverage&quot;&gt;Beverage&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;/en-us/categories/food/baby-food&quot;&gt;Baby Food&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

如何实现与图像内联的对齐换行？

问题

答案1

如何在由JavaScript操作的进度条末尾添加SVG。

创建数据库表格从HTML表格中。

为什么这个不创建一个正方形？

Safari中的Bootstrap卡片未占用行的高度。

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论