如何将普通文本与<a>标签内的h6样式内联？

huangapple
go评论140阅读模式
英文:

How to style the normal text inline with an h6 inside a <a>

问题

我有一个包含<a>元素的情况，在其中包含有一个h6和普通文本。我该如何为普通文本部分添加样式？

我尝试使用:not(h6)来设置内边距和border-radius: 20px等其他样式... 请查看我的CSS：

.uagb-taxomony-box  {
  background-color: transparent!important;
  border: none!important;
  text-decoration: none!important;
  text-align: left!important;
}

a.uagb-tax-link h6 {
  text-align: left!important;
}

.uagb-tax-link:not(h6) {
  text-decoration: none!important;
  padding: 5px!important;
  background-color: #18419C!important;
  border-radius: 20px!important;
}

但请查看下面的截图，看看发生了什么：如何将普通文本与<a>标签内的h6样式内联？

如何正确为此添加样式？提前感谢您。

英文:

I have an &lt;a&gt; element that inside has an h6 and normal text. How I can style the normal text part?
I'm trying to use :not(h6) to put padding and border-radius:20px and others styles... see my css:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.uagb-taxomony-box  {
  background-color:transparent!important;
  border:none!important;
  text-decoration:none!important;
  text-align:left!important;
  
}

a.uagb-tax-link h6{text-align:left!important;}

.uagb-tax-link:not(h6){
  text-decoration:none!important;
  padding:5px!important;
  background-color:#18419C!important;
  border-radius:20px!important;
}

<!-- language: lang-html -->

    &lt;div class=&quot;uagb-taxomony-box&quot;&gt;
    	&lt;a class=&quot;uagb-tax-link&quot; href=&quot;https://dev3.netnerd.cat/tipus/desenvolupament-de-negoci/&quot;&gt;
    	  &lt;h6 class=&quot;uagb-tax-title&quot;&gt;Desenvolupament de negoci&lt;/h6&gt;
    	&quot; 16 Projectes &quot;
        &lt;/a&gt;
    &lt;/div&gt;

<!-- end snippet -->

but watch what is happening in the screenshot below:如何将普通文本与<a>标签内的h6样式内联？

How can I style well this?
Thanks in advance

答案1

得分: 1

你可以为 "a" 元素添加 display: inline-block。如果你想要给文本添加背景，那么将文本放在 span 元素中并对其进行样式化。以下是更新后的代码：

.uagb-taxomony-box  {
  background-color:transparent!important;
  border:none!important;
  text-decoration:none!important;
  text-align:left!important;
}

a.uagb-tax-link:not(h6){
  display: inline-block;
    text-decoration:none!important;
    padding:5px!important;
    border-radius:20px!important;
}

a.uagb-tax-link h6{
    text-align:left!important;
}

.simple-text{
  background-color:#18419C!important;
  color: #fff;
}

<div class="uagb-taxomony-box">
    <a class="uagb-tax-link" href="https://dev3.netnerd.cat/tipus/desenvolupament-de-negoci/">
      <h6 class="uagb-tax-title">Desenvolupament de negoci</h6>
      <span class="simple-text"> " 16 Projectes " </span>
    </a>
</div>

这是翻译后的内容。

英文:

You can give display: inline-block to "a" element. If you want to give background to only text. Then put the text in span element and give styling to it. Here is the updated code:-

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.uagb-taxomony-box  {
  background-color:transparent!important;
  border:none!important;
  text-decoration:none!important;
  text-align:left!important;
  
}

a.uagb-tax-link:not(h6){
  display: inline-block;
    text-decoration:none!important;
    padding:5px!important;
    border-radius:20px!important;
}

a.uagb-tax-link h6{
    text-align:left!important;
}



.simple-text{
  background-color:#18419C!important;
  color: #fff;
}

<!-- language: lang-html -->

    &lt;div class=&quot;uagb-taxomony-box&quot;&gt;
        &lt;a class=&quot;uagb-tax-link&quot; href=&quot;https://dev3.netnerd.cat/tipus/desenvolupament-de-negoci/&quot;&gt;
          &lt;h6 class=&quot;uagb-tax-title&quot;&gt;Desenvolupament de negoci&lt;/h6&gt;
          &lt;span class=&quot;simple-text&quot;&gt; &quot; 16 Projectes &quot; &lt;/span&gt;
        &lt;/a&gt;
    &lt;/div&gt;

<!-- end snippet -->

答案2

得分: 1

你可以使用 position: absolute：

.uagb-taxomony-box  {
  background-color: transparent!important;
  border: none!important;
  text-decoration: none!important;
  text-align: left!important;
}

a.uagb-tax-link h6 {
  text-align: left!important;
}

.uagb-tax-link {
  display: inline-block;
  margin-top: 80px;
  position: relative;
  text-decoration: none!important;
  padding: 5px!important;
  background-color: #18419C!important;
  border-radius: 20px!important;
  color: #fff;
}

.uagb-tax-link h6 {
  position: absolute;
  top: -80px;
  color: #000;
}

<div class="uagb-taxomony-box">
  <a class="uagb-tax-link" href="https://dev3.netnerd.cat/tipus/desenvolupament-de-negoci/">
    <h6 class="uagb-tax-title">Desenvolupament de negoci</h6>
    " 16 Projectes "
  </a>
</div>
英文:

You can use position: absolute:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.uagb-taxomony-box  {
  background-color:transparent!important;
  border:none!important;
  text-decoration:none!important;
  text-align:left!important;
  
}

a.uagb-tax-link h6{text-align:left!important;}

.uagb-tax-link {
  display: inline-block;
  margin-top: 80px;
  position: relative;
  text-decoration:none!important;
  padding:5px!important;
  background-color:#18419C!important;
  border-radius:20px!important;
  color: #fff;
}
.uagb-tax-link h6 {
  position: absolute;
  top: -80px;
  color: #000;
}

<!-- language: lang-html -->

&lt;div class=&quot;uagb-taxomony-box&quot;&gt;
        &lt;a class=&quot;uagb-tax-link&quot; href=&quot;https://dev3.netnerd.cat/tipus/desenvolupament-de-negoci/&quot;&gt;
          &lt;h6 class=&quot;uagb-tax-title&quot;&gt;Desenvolupament de negoci&lt;/h6&gt;
        &quot; 16 Projectes &quot;
        &lt;/a&gt;
    &lt;/div&gt;

<!-- end snippet -->

答案3

得分: 0

Here is the translation of the provided code:

根据https://stackoverflow.com/users/16948533/developer的建议，我需要在这里添加一个元素，以正确样式化无

标签的部分。

然后我使用了以下代码：

$('.uagb-tax-link').each(function() {
  var $link = $(this);
  var $textNodes = $link.contents().filter(function() {
    return this.nodeType === 3;
  });
  var $span = $('<span class="text-no-h6"></span>').text($textNodes.last().text());
  $textNodes.last().replaceWith($span);
});

然后CSS样式被修改为：

.uagb-taxomony-box  {
  background-color: transparent!important;
  border: none!important;
  text-decoration: none!important;
  text-align: left!important;
}

a.uagb-tax-link h6 {
  text-align: left!important;
}

span.text-no-h6 {
  text-decoration: none!important;
  padding: 5px!important;
  background-color: #18419C!important;
  border-radius: 20px!important;
}

Please note that the code itself remains in English, and only the comments and descriptions have been translated into Chinese.

英文:

As https://stackoverflow.com/users/16948533/developer has pointed I need to add a span here for properly style the no-h6 part.

Then i've used something like:

  $(&#39;.uagb-tax-link&#39;).each(function() {
    var $link = $(this);
    var $textNodes = $link.contents().filter(function() {
      return this.nodeType === 3;
    });
    var $span = $(&#39;&lt;span class=&quot;text-no-h6&quot;&gt;&lt;/span&gt;&#39;).text($textNodes.last().text());
    $textNodes.last().replaceWith($span);
  });

And then css get's modyfied as:

.uagb-taxomony-box  {
  background-color:transparent!important;
  border:none!important;
  text-decoration:none!important;
  text-align:left!important;
  
}

a.uagb-tax-link h6{text-align:left!important;}

span.text-no-h6{
  text-decoration:none!important;
  padding:5px!important;
  background-color:#18419C!important;
  border-radius:20px!important;
}

huangapple
  • 本文由 发表于 2023年5月17日 18:19:54
  • 转载请务必保留本文链接：https://go.coder-hub.com/76271030.html
  • css
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定