无法将div的内容在Edge中向左对齐

Question

我们有一个侧面菜单，其中每个列表项都包含一个图像和文本，这些图像和文本应向左对齐。在Google Chrome浏览器中看起来还不错，但是IE和Edge呈现的方式有所不同。我不介意IE无法正常工作（我可能会稍后再尝试），但是Edge需要按预期工作。

将justify-content: flex-start更改为<a>后，我尝试在display: flex标签上使用a { text-decoration: none; } ol, ul { list-style: none; } #sidebar { width: 230px; } #sidebar ul { margin: 10px 0; padding: 0; } #sidebar li { margin: 0; padding: 0; } #sidebar ul a { display: inline-flex; align-items: center; text-align: left; white-space: pre-wrap; border: 1px solid grey; padding: 15px 20px; width: 155px; min-width: 155px; } #sidebar ul a img { margin: 0 15px 0 4px; padding: 0; height: 21px; width: 20px; }，但在这种情况下不起作用。

<div id="sidebar">
  <ul>
    <li>
      <a href="#">
        <img src="https://i.imgur.com/UU5GJm7.png" >
        <span>Super Long Account Name</span>
      </a>
    </li>
  </ul>
</div>

from random import shuffle
value=['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','r','s','t','u','v','w','x','y','z','1','2','3','4','5','6','7','8','9','0']
get_string=input('Enter the string:- ')
try:
    position=int(input('Enter the Salt position:- '))
    salt_length=int(input('Enter the length of the salt:- '))
except ValueError:
    print ('Error:- Deserve a "intiger" number.')
    exit()
shuffle(value)
value=",".join(value)
value="".join(value.split(',',salt_length-1))
salt_value=value.split(',')[0]
print(salt_value)
if position >len(get_string):
    print('exit')
get_string=get_string.strip()
st=list(get_string)
print (st)
st=st.insert(position,salt_value)
print (st)

以下是代码在Chrome vs Edge中的呈现方式：

任何帮助将不胜感激

Answer 1

只需从white-space: pre-wrap;样式中删除#sidebar ul a。这将解决您的问题。

请参见下面的摘录

a {
  text-decoration: none;
}

ol,
ul {
  list-style: none;
}

#sidebar {
  width: 230px;
}

#sidebar ul {
  margin: 10px 0;
  padding: 0;
}

#sidebar li {
  margin: 0;
  padding: 0;
}

#sidebar ul a {
  display: inline-flex;
  align-items: center;
  text-align: left;
  /*white-space: pre-wrap;*/
  border: 1px solid grey;
  padding: 15px 20px;
  width: 155px;
  min-width: 155px;
}

#sidebar ul a img {
  margin: 0 15px 0 4px;
  padding: 0;
  height: 21px;
  width: 20px;
}

<div id="sidebar">
  <ul>
    <li>
      <a href="#">
        <img src="https://i.imgur.com/UU5GJm7.png" >
        <span>Super Long Account Name</span>
      </a>
    </li>
  </ul>
</div>

Answer 2

我相信white-space: pre-wrap;导致了您的问题

尝试删除它的所有实例（从如下所示的选择器中）：

#sidebar ul a {
  white-space: pre-wrap;
}

a {
  text-decoration: none;
}

ol,
ul {
  list-style: none;
}

#sidebar {
  width: 230px;
}

#sidebar ul {
  margin: 10px 0;
  padding: 0;
}

#sidebar li {
  margin: 0;
  padding: 0;
}

#sidebar ul a {
  display: inline-flex;
  align-items: center;
  text-align: left;
  border: 1px solid grey;
  padding: 15px 20px;
  width: 155px;
  min-width: 155px;
}

#sidebar ul a img {
  margin: 0 15px 0 4px;
  padding: 0;
  height: 21px;
  width: 20px;
}

<div id="sidebar">
  <ul>
    <li>
      <a href="#">
        <img src="https://i.imgur.com/UU5GJm7.png" >
        <span>Super Long Account Name</span>
      </a>
    </li>
  </ul>
</div>