主页 / 问题 / 1254208
Accepted
Komend
Asked:2022-03-11 02:23:20 +0000 UTC2022-03-11 02:23:20 +0000 UTC

为什么在使用 margin-right 时所有单词都彼此远离。HTML、CSS

  • 772

我是css, html, php,的初学者js。我决定做一个网站，我曾经有经验，大约 4 年前，现在我忘记了一切。

我希望文字从右边缘移开。问题是当我使用margin-right: 100x; 然后不仅单词从右边缘移开，而且单词本身也从它们自己移开。

以下是截图： margin-right:30px 在此处输入图像描述

但如果与margin-right:100px 在此处输入图像描述

这是html代码：

<div class="text-options">
        <li><a href="#" class="jopo">Язык ▼</a></li>
        <li><a href="#">Профиль ▼</a></li>
    </div>

这是css代码：

.text-options li{
display: inline-block;
float: right;
margin-right:30px;
list-style: none;
padding: 20px;}

.text-options li a{
color: #FFF;
text-decoration: none;}

可能是什么原因？还是margin-right它对其他事情负责？需要你的帮助！

html

2 个回答

  1. 问题是您为列表的所有元素设置了margin-right，为了只为一个元素添加缩进，您需要为其设置它（mb有点令人困惑，我只是自己开始）

     <style>
    .text-options li{
        display: inline-block;
        float: right;
        list-style: none;
        padding: 20px;
    }

    .text-options li a{
        color: #FFF;
        text-decoration: none;
    }

    .first{
        margin-right:30px;
    }
</style>

<div class="text-options">
    <li class="first"><a href="#" class="jopo">Язык ▼</a></li>
    <li><a href="#">Профиль ▼</a></li>
</div>

    我做到了，它似乎工作：D

    • 1
  2. Best Answer

    非常简短：

    • 在这种情况下，最好margin-left从列表元素的每个左边缘使用缩进。整体填充padding从其内部边缘应用于父元素。

    • 您可以使用 Flex 定位元素。如果你已经有过html和的经验css，那么你理解它就不难了。这个技术其实很简单。

    • 三角形的图像最好使用伪元素显示。不要将它们包装在标签<a>中。

    • 所有HTML列表项都<li>必须包含在标签<ul>中。

    您的正确布局应如下所示：

    body {
  margin: 0;
  padding: 0;
  background: #383838;
}

.text-options {
  padding: 25px 50px;
  background: #242424;
  border-bottom: 2px solid #fff;
}

.text-options ul {
  display: flex;
  flex-flow: row-reverse nowrap;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: monospace;
  font-size: 18px;
  color: #fff;
}

.text-options li {
  margin-left: 50px;
}

.text-options li:after {
  content: "▼";
  padding-left: 5px;
}

.text-options a {
  color: #fff;
  text-decoration: none;
}
    <div class="text-options">
  <ul>
    <li><a href="#" class="jopo">Язык</a></li>
    <li><a href="#">Профиль</a></li>
  </ul>
</div>

    • 0

相关问题