如何设置格式以使文本不随图像移动

编程问答 2022-04-22

问题描述

关于如何让我的 ul 不被身体中图像的位置/大小改变的任何帮助？我已经尝试这样做了很长时间，这是我的第一个编码项目，所以我遇到了一些问题。任何帮助将不胜感激。

<!DOCTYPE html>
<html>

   
  <head>
   <base target="_top">
    <style>
    .listStyle {
      font-size:175%;
      text-align:center;
      list-style-type:none;
      margin-left: auto;
      margin-right: auto;
      padding: 0;
    }
    </style>
  
  </head>
  <body>
    <span><img src="url" alt="YMF logo" style="float:right;" height="auto";width="100px;margin: 0 auto;"></span>
    <b>
      <u>
<h1 style="position:relative;top:40px;text-align:center;font-size:175;">
Warehouse Quick Links
</h1>
</u>
<div style="position:relative;top:20px;">
  <ul class="listStyle">
    
  <li>
    <a href="url" target="_blank" rel="noreferer noopener"> Outbound Sheet </a> 
  </li>

  <li>
    <a href = "url" target="_blank" rel="noreferer noopener"> Spoils Form </a>
  </li>
  
  <li>
    <a href = "url" target="_blank" rel="referer noopener"> Check-In Form </a> 
  </li>

  <li>
    <a href = "url" target="_blank" rel="referer noopener"> Amazon Pallet Guide </a>
  </li>

  <li>
    <a href = "url" target="_blank" rel="referer noopener"> Amazon Packaging Guide </a>
  </li>

  <li>
    <a href = "url" target="_blank" rel="referer noopener"> Shipstation </a>
  </li>
    
  <li>
    <a href = "url" target="_blank" rel="referer noopener"> Amazon Seller Central </a>
  </li>

  </ul>
</div>
</b>
  </body>
</html>

解决方法

你可以给图片一个风格

position:absolute
top: 0;
right: 0;

而不是浮动：对。 它应该工作

,

您可以按如下方式使用类

.myimage{
  position: absolute;
  top: 10;
  right: 0; /* or left: 0; if you want to change */
  height: auto;
  width: 100px;
  margin: 0 auto;
}

JSFIDDLE

formatformatformathtmlhtml-listsimageimageimage