0

Web ページで jQuery UI アコーディオン (バージョン 1.9.2) を使用しようとしています。ただし、要素の CSS の background-color プロパティをテキストの長さ (インラインの外観に似ている) に設定したいのですが、そのp方法がわかりません。、、、div の代わりにスパンを使用し、各段落の幅を設定することさえdisplay:inline;試みました。display:inline-blockこれらはすべて、主にアコーディオンを台無しにするか、機能しません。

ここに私の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 に答える