css 更改发票上特定客户字段的位置

vdgimpew  于 12个月前  发布在  其他
关注(0)|答案(3)|浏览(75)
    • bounty还有2天到期**。此问题的答案有资格获得+50声望奖励。TvCasteren希望引起更多关注这个问题。

我们的网店根据客户输入的字段生成发票。但是，并非所有字段都是必需的。有一个字段不是必需的，即公司名称，我们希望在适用时将其放置在名称+地址之上。
目前，我们的附加字段的定位是这样编辑的：

/*  .additional-information {
  position: absolute;
  left: 250px;
  bottom: -100px;
  }*/
      .additional-information > div:nth-of-type(1) {
  position: relative;
  left: 0px;
  top: -15px;
}
    .additional-information > div:nth-of-type(2) {
  position: relative;
  left: 0px;
  top: -15px;

#and so forth for a max of 12 fields
}

当客户输入此公司字段时，是否有专门编辑此公司字段的方法？当我检查模板时，我只看到一个“<div>”的列表，而“公司名称”字段没有标识符。我是CSS新手，所以我可能会忽略一些事情。
额外信息：
本文件由租赁软件程序生成。程序不允许我们自定义HTML代码。我们唯一的选择是添加自定义CSS，这样我们就可以编辑给我们的内容。下面我举了一个例子来说明我们目前的情况。
这些字段会自动置于“附加信息”类之下。如果适用，公司字段名称属于<strong>Company name</strong>，因此，如果客户有业务，则此字段将不会显示。

<div class="additional-information">
<div>
   <strong>Company name</strong>
   <span data-private="true" data-openreplay-masked="true" data-openreplay-obscured= "true">...</span>
 </div>
<div>...</div>

以下字段的预期最终结果：

css

3条答案

按热度按时间
fae0ux8s

fae0ux8s1#

在您编辑问题之前添加的screenshot的帮助下，我能够提出解决方案。

问题

问题是，公司名称的元素不是要放置它的元素的子元素或后代元素。因此，仅在包含公司名称的元素上使用position: absolute;将导致以下输出：

.additional-information div:first-child {
  position: absolute;
}
<div id="user-info">
  <strong class="customer-name">Sjors</strong>
  <form>
    <div class="show-user">
      <i class="icon-pencil"></i>
      <span>
        "twist"
        <br>
        "5099XX Amsterdam NL"
      </span>
    </div>
  </form>
  <div class="customer-email">johndoe@hotmail.com</div>
  <div class="additional-information">
    <div>
      <strong>Company name</strong>
      <span data-private="true" data-openreplay-masked="true" data-openreplay-obscured="true">Testcompany</span>
    </div>
    <div>Second</div>
    <div>Third</div>
    <div>Fourth</div>
    <div>Fifth</div>
    <div>Sixth</div>
  </div>
</div>

解决方案

总之，有一个CSS解决方案不是很优雅。在包含公司名称的元素的父元素上使用position: absolute;将导致以下输出（即，一团乱麻）：

.additional-information {
  position: absolute;
  top: 0;
}

.additional-information div:first-child {
  position: absolute;
}
<div id="user-info">
  <strong class="customer-name">Sjors</strong>
  <form>
    <div class="show-user">
      <i class="icon-pencil"></i>
      <span>
        "twist"
        <br>
        "5099XX Amsterdam NL"
      </span>
    </div>
  </form>
  <div class="customer-email">johndoe@hotmail.com</div>
  <div class="additional-information">
    <div>
      <strong>Company name</strong>
      <span data-private="true" data-openreplay-masked="true" data-openreplay-obscured="true">Testcompany</span>
    </div>
    <div>Second</div>
    <div>Third</div>
    <div>Fourth</div>
    <div>Fifth</div>
    <div>Sixth</div>
  </div>
</div>

使用一些margin s将导致以下输出：

form {
  margin-top: 30px;
}

.additional-information {
  position: absolute;
  top: 0;
}

.additional-information div:first-child {
  margin-top: 32px;
}

.additional-information div:nth-child(2) {
  margin-top: 80px;
}
<div id="user-info">
  <strong class="customer-name">Sjors</strong>
  <form>
    <div class="show-user">
      <i class="icon-pencil"></i>
      <span>
        "twist"
        <br>
        "5099XX Amsterdam NL"
      </span>
    </div>
  </form>
  <div class="customer-email">johndoe@hotmail.com</div>
  <div class="additional-information">
    <div>
      <strong>Company name</strong>
      <span data-private="true" data-openreplay-masked="true" data-openreplay-obscured="true">Testcompany</span>
    </div>
    <div>Second</div>
    <div>Third</div>
    <div>Fourth</div>
    <div>Fifth</div>
    <div>Sixth</div>
  </div>
</div>

边缘案例

到目前为止，一切顺利。但是，在将我的解决方案应用于真实的情况时，您需要考虑至少三种边缘情况：

边缘情况#1：未输入公司名称

有关解决方案，请参阅下面的代码片段。

form {
  margin-top: 30px;
}

.additional-information {
  position: absolute;
  top: 0;
}

.additional-information div:first-child {
  margin-top: 32px;
  border: 1px solid red;
}

.additional-information div:first-child:empty {
  margin-top: 40px;
  border: 1px solid blue;
}

.additional-information div:nth-child(2) {
  margin-top: 80px;
}
<div id="user-info">
  <strong class="customer-name">Sjors</strong>
  <form>
    <div class="show-user">
      <i class="icon-pencil"></i>
      <span>
        "twist"
        <br>
        "5099XX Amsterdam NL"
      </span>
    </div>
  </form>
  <div class="customer-email">johndoe@hotmail.com</div>
  <div class="additional-information">
    <div></div>
    <div>Second</div>
    <div>Third</div>
    <div>Fourth</div>
    <div>Fifth</div>
    <div>Sixth</div>
  </div>
</div>

边缘情况#2：很长的公司名称

如果公司名称很长，则需要调整CSS。

边缘情况#3：默认CSS可能与我的解决方案冲突

我的解决方案可能不适用于您的真实的情况，因为您提到的租赁软件程序附带的默认CSS。
我的建议
正如您所看到的，不可能提出一个优雅的CSS解决方案，ceteris paribus（即，所有其他条件都相同）。如果我是你，我会让它保持原样。在你看来，它可能并不完美，但我认为不值得冒着这样的边缘案例的风险，让你的客户（或任何会看到它的人）说：* 这看起来糟透了 * 这是一种权衡在x%的情况下，它可能看起来好一点，但那些y%可能更糟。

赞(0）分享  回复(0）举报  12个月前
smdnsysy

smdnsysy2#

在阅读我提出的解决方案之前，请注意，虽然您指定：
"* 本文件由租赁软件程序生成。该程序不允许我们自定义HTML代码。*"
我的解决方案只有在你能以某种方式修改程序以始终呈现公司名称字段的情况下才会起作用，即使它是空的。我不确定这是否算作“定制HTML代码”。
此外，HTML模板必须始终生成相同的布局，并具有完全相同的字段顺序-但我假设它已经做到了？
这背后的原因是，如果公司字段也被生成，即使它是空的，你可以100%准确地控制你的CSS选择器。
查看HTML模板，company字段似乎是.additional-information-元素的第三个<div>。了解了这一点，您可以使用nth-of-type(3)来选择该字段：

.additional-information > div:nth-of-type(3) { }

此外，如果公司字段为空，我们可以使用:has()和:empty（或:blank）的组合来选择公司字段。如果是空的，给它display: none：

.additional-information > div:nth-of-type(3):has(span:empty) {
  display: none;
}

如果不为空，则应用所需的定位值：

.additional-information > div:nth-of-type(3) {
  top: 10px;
  position: absolute;
}

现在的问题是<div> s将彼此重叠：

.additional-information > div > span {
  display: block;
}

.additional-information > div:nth-of-type(1) {
  position: relative;
  left: 0px;
  top: -15px;
}

.additional-information > div:nth-of-type(2) {
  position: relative;
  left: 0px;
  top: -15px;
}

.additional-information > div:nth-of-type(3):has(span:empty) {
  display: none;
}

.additional-information > div:nth-of-type(3) {
  top: 10px;
  position: absolute;
}
<div class="additional-information">
  <div>
    <strong>Address</strong>
    <span data-private="true" data-openreplay-masked="true" data-openreplay-obscured="true">Address line 1</span>
    <span data-private="true" data-openreplay-masked="true" data-openreplay-obscured="true">Address line 2</span>
    <span data-private="true" data-openreplay-masked="true" data-openreplay-obscured="true">Address line 3</span>
  </div>
    <div>
    <strong>Phone number</strong>
    <span data-private="true" data-openreplay-masked="true" data-openreplay-obscured="true">12345678</span>
  </div>
  <div>
    <strong>Company name</strong>
    <span data-private="true" data-openreplay-masked="true" data-openreplay-obscured="true">Name of company</span>
  </div>
</div>

为了防止这种情况，请将margin-top值应用于地址字段中的第一个<span>，相当于2行文本的高度（“公司名称”和公司名称本身）：

.additional-information > div:nth-of-type(1) span:first-of-type {
  margin-top: 35px;
}

如果<span>为空，为了防止margin-top值，再次使用:has()和:empty的讨厌组合：

.additional-information:has(div:nth-of-type(3) span:empty) > div:nth-of-type(1) span:first-of-type {
  margin-top: 0;
}

代码运行

body {
  display: flex;
  gap: 100px;
}

.additional-information > div > span {
  display: block;
}

.additional-information > div:nth-of-type(1) {
  position: relative;
  left: 0px;
  top: -15px;
}

.additional-information > div:nth-of-type(2) {
  position: relative;
  left: 0px;
  top: -15px;
}

.additional-information > div:nth-of-type(3):has(span:empty) {
  display: none;
}

.additional-information > div:nth-of-type(3) {
  top: 10px;
  position: absolute;
}

.additional-information > div:nth-of-type(1) span:first-of-type {
  margin-top: 35px;
}

.additional-information:has(div:nth-of-type(3) span:empty) > div:nth-of-type(1) span:first-of-type {
  margin-top: 0;
}
<div class="additional-information">
  <div>
    <strong>Address</strong>
    <span data-private="true" data-openreplay-masked="true" data-openreplay-obscured="true">Address line 1</span>
    <span data-private="true" data-openreplay-masked="true" data-openreplay-obscured="true">Address line 2</span>
    <span data-private="true" data-openreplay-masked="true" data-openreplay-obscured="true">Address line 3</span>
  </div>
    <div>
    <strong>Phone number</strong>
    <span data-private="true" data-openreplay-masked="true" data-openreplay-obscured="true">12345678</span>
  </div>
  <div>
    <strong>Company name</strong>
    <span data-private="true" data-openreplay-masked="true" data-openreplay-obscured="true">Company name</span>
  </div>
</div>


<div class="additional-information">
  <div>
    <strong>Address</strong>
    <span data-private="true" data-openreplay-masked="true" data-openreplay-obscured="true">Address line 1</span>
    <span data-private="true" data-openreplay-masked="true" data-openreplay-obscured="true">Address line 2</span>
    <span data-private="true" data-openreplay-masked="true" data-openreplay-obscured="true">Address line 3</span>
  </div>
    <div>
    <strong>Phone number</strong>
    <span data-private="true" data-openreplay-masked="true" data-openreplay-obscured="true">12345678</span>
  </div>
  <div>
    <strong>Company name</strong>
    <span data-private="true" data-openreplay-masked="true" data-openreplay-obscured="true"></span>
  </div>
</div>

附加信息：

赞(0）分享  回复(0）举报  12个月前
yquaqz18

yquaqz183#

编辑：这个定位“公司名称，我们希望放在名称+地址之上”的解决方案回答了the question as it was presented at the time，它只给出了标记的一部分的屏幕截图，只显示了有问题的部分的<div>..</div>，并且没有包括当公司名称没有给出时会发生什么（div是空白还是不存在？然而，人们决定否决这一点，甚至没有说为什么他们认为这是无益的。
如果公司名称位于<div class="additional-information">的第二个子div中，那么这个方法可能会对你有用。

#user-info {
  position: relative;
  padding-top: 1em;
  }

.additional-information > div:nth-of-type(2) {
  position: absolute;
  top: 0;
  }
<div id="user-info">
  <strong>Sjors</strong>
  <form>twist</form>
  <div class="customer-email">johndoe@hotmail.com</div>
  <div class="additional-information">
    <div>Phone</div>
    <div>Bedrijfsnaaam (Company Name)</div>
    <div>Straatnaam (Street Name)</div>
  </div>
赞(0）分享  回复(0）举报  12个月前
我来回答

相关问题

    查看更多
    微信公众号

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com