图像和右对齐文本的网站响应问题

Question

我试图让我的网站响应，但我运行遇到两个主要问题。当我减小 window 的宽度而不是保持对齐时，我有一个右对齐的文本从屏幕上消失。我已经尝试 margin-right: auto; 但它不起作用。我要使其响应的右对齐文本也与 <li> 项

在同一行

<li><h3><a href="..\Menu\Kid's_Menu.html">Kid's menu<span class="tabbed_text">25,50 lei</span></a></h3> </li>
<li><h3><a href="..\Menu\Menu_1.html">Menu #1<span class="tabbed_text">25,50 lei</span></a></h3> </li>
<li><h3><a href="..\Menu\Menu_2.html">Menu #2<span class="tabbed_text">25,50 lei</span></a></h3></li>
<li><h3><a href="..\Menu\Menu_3.html">Menu #3<span class="tabbed_text">25,50 lei</span></a></h3></li>

这是我用的html

.tabbed_text{
  display:inline-block;
  
  font-family: "caveat";
  font-size: 30px;
  position:absolute;
  left:1750px;
  
}
li{
  font-family: "cattie";
  font-weight: bold;
  font-size: 25px;
}

这是css他们的用途

这是他们在屏幕上的样子

第二期与图片有关：

这是全屏显示的样子，但当我缩小 window 时，它最终变成这样：

这是我用于图像的css：

.small_logo{
  width: 150px;
  height: auto;
  position:absolute;
  top:3%;
  left:34%;
}

Answer 1

问题 1：

您设置的 span 标签是 position:absolute;left:1750px; => 所以当你收缩时你不能做出反应。

HTML:

 <ol>
  <li>
   <div>
     <a href="..\Menu\Kid's_Menu.html">Kid's menu</a>
     <span class="tabbed_text">25,50 lei</span>
   </div>
  </li>
</ol>

CSS:

div {
  font-family: "caveat";
  font-size: 30px;
  display: flex;
  justify-content: space-between;
}
a {
  font-family: "caveat";
  font-size: 30px;
}
li {
  font-family: "cattie";
  font-weight: bold;
  font-size: 25px;
}

你可以看到示例here:

问题2：

等你解决问题我帮你解决！

图像和右对齐文本的网站响应问题

Web site responsiveness issue with images and right aligned text

html

css

responsive-design

问题 1：

问题2：