CSS：右：0px；属性不工作答案

【问题标题】：CSS: right : 0px ; property is not workingCSS：右：0px；属性不工作
【发布时间】：2022-01-28 04:13:29
【问题描述】：

代码如下：

.form-wrapper {
  border: 1px solid rgb(68, 240, 0);
  background-image: radial-gradient(rgb(252, 252, 252), #ffffff);
  border-radius: 20px;
  width: 400px;
  position: relative;
  padding: 10px 40px;
  margin: 10px auto;
}

.close-button {
  position: absolute;
  right: 0px;
  left: auto;
  border: 1px solid rgb(240, 0, 0);
  width: 40px;
}

.form-header {
  border: 1px solid rgb(232, 0, 240);
  position: relative;
  text-align: center;
}

.form-header h3 {
  display: inline;
}

.form-outline {
  border: 1px solid rgb(237, 250, 235);
  border-radius: 20px;
  padding: 5px 30px;
}

.form-field {
  margin-top: 5px;
}

.form-field input {
  outline: none;
  width: 100%;
  display: block;
  padding: 5px;
  font-size: 15px;
  border: 2px solid rgb(179, 177, 177);
  border-radius: 6px;
  background-color: rgba(227, 247, 250, 0.918);
}

.form-field small {
  display: block;
  visibility: hidden;
}

<div class="form-wrapper">
  <div class="close-button"><i class="far fa-times-circle "></i></div>
  <div class="form-header">
    <!-- <div style="border: 2px solid aqua;"></div> -->
    <h3> Lets talk!</h3>

  </div>

  <form class="form-outline">
    <div class="form-field">
      <label class="field-title">Name </label><br>
      <input type="text" id="" value="" placeholder="Enter your name."> <br>
      <small class="error-message">Error message</small>
    </div>

    <div class="form-field">
      <label class="field-title">Phone </label><br>
      <input type="text" id="" value="" placeholder="Enter your phone number."> <br>
      <small class="error-message">Error message</small>
    </div>

    <div class="form-field">
      <label class="field-title">Organization </label><br>
      <input type="text" id="" value="" placeholder="Enter your organization's name."><br>
      <small class="error-message">Error message</small>
    </div>

    <div class="form-field">
      <label class="field-title">Address </label><br>
      <input type="text" id="" value="" placeholder="Enter your address."> <br>
      <small class="error-message">Error message</small>
    </div>

    <div class="form-field">
      <label class="field-title">Email </label><br>
      <input type="text" id="" value="" placeholder="Enter your email."> <br>
      <small class="error-message">Error message</small>
    </div>
  </form>
</div>

The result looks like this.

我想将“关闭按钮”移动到右侧，贴在表单包装器 div 的绿色边框上。正确的属性不起作用。我不知道这是一个愚蠢的错误还是缺乏知识。任何帮助或方向将不胜感激。我使用另一个 html 文件测试了正确的属性，它运行良好。但我无法将这个关闭按钮向右移动。

【问题讨论】：

我刚刚测试了您的代码，但没有得到相同的结果。一切如你所愿
顺便说一句，我通过将关闭按钮位置设置为相对来获得您的结果，检查它是否在 chrome 开发工具中设置为绝对。也许有另一种风格干扰它
div.close-button { position:absolute; right:0px; left:auto; border:1px solid rgb(240, 0, 0); width: 40px; height:40px; } 我使用了 div.close-button 它对我有用。我不知道为什么特异性是一个问题。 Position 属性用于相对于父母。

标签： html css

【解决方案1】：

尝试将此添加到您的关闭按钮类。它对我有用。

.close-button {
direction: rtl;
}

【讨论】：

【解决方案2】：

您的代码很好，应该可以正常工作。也许您没有right: 0px; 的样式会被浏览器缓存。尝试在新的私人/隐身标签中打开您的项目。它会阻止浏览器读取缓存的样式。

【讨论】：