0

我正在尝试在我的网页中使用 jQuery UI 手风琴（版本 1.9.2）。但是，我想将p元素的 CSS 的 background-color 属性设置为文本的长度（类似于内联外观），但我不知道该怎么做。我试过display:inline;, display:inline-block，使用 span 而不是 div，甚至设置每个段落的宽度。所有这些要么主要与手风琴有关，要么根本不起作用。

这是我的 HTML：

    <div id="accordion">
      <h3>Sample</h3>
      <div id="accordion-section">
        <p>TEXT TEXT TEXT<br>
        TEXT TEXT TEXT<br>
        TEXT TEXT TEXT</p>
        <p>TEXT TEXT TEXT<br>
        TEXT TEXT TEXT</p>
        <p>TEXT TEXT TEXT<br>
        TEXT TEXT TEXT</p>
      </div>
    <div>

这是我的CSS：

#header{
  font-family:cursive;
  text-align:center;
}
#accordion div{
  padding-left: 110px;
}
p{
  background-color:#68FF53;
  border-radius:5px;
  padding: 0 10px;
  text-indent: -10px;
  padding-left: 20px
}
#education p{
  padding-bottom: 10px;
  display:inline-block;
}
ul li{
  list-style-type: none;
  display: inline-block;
  background: #75A3EE;
  padding: 0 10px;
  border-radius: 5px;
}

jQuery 只是设置了基本的手风琴，仅此而已。

有人对如何做到这一点有任何想法吗？

4

2 回答 2

0

我真的不明白这个问题，

..to set the background-color property ... of the p elements to be the length of the text

对我来说，这意味着您正在尝试将颜色属性设置为数字长度？

如果您试图确定<p>它的容器文本的长度，那么也许使用white-space:nowrap它将阻止文本进入新行。

至于设置背景颜色，那么你的线background-color:#68FF53;应该没问题。

于 2012-12-23T09:22:45.103 回答
0

您可以在段落中使用 span 标签并在 span 上提供背景。所以背景属性只会是文本的长度。

<div id="accordion-section">
        <p><span>TEXT TEXT TEXT<br>
        TEXT TEXT TEXT<br>
        TEXT TEXT TEXT</span></p>
        <p><span>TEXT TEXT TEXT<br>
        TEXT TEXT TEXT</span></p>
        <p><span>TEXT TEXT TEXT<br>
        TEXT TEXT TEXT</span></p>
      </div>

CSS

#accordion-section p span{
background-color:#68FF53;
}
于 2012-12-23T09:28:04.067 回答