0
私は右に矢印を追加したリストを持っています。私はそれを反応させる必要があります。しかし、ブラウザのサイズが変更されると、矢印は次の行に折り返され、テキストは他のテキストと重なります。これは、選択されたリストに基づいて隠れたり表示されたりする段落を持つことを目的としていますが、そのコードをまだ追加していないため、応答可能なリストが得られるようです。私はまた、リスト要素の周りにdivを配置し、矢印のリストタグ内に別のdivを追加しようとしましたが、うまくいかなかった。私はまた、順序付けられていないリストをテーブルの表示とリストのテーブルセルの表示に変換しようとしましたが、どちらも機能しませんでした。私はどんな場合でも間違って何をしているのか分からない。応答のための唯一のブレークポイントがあり、それは960です。助けることができる誰にも感謝!!右にアイコンが付いた応答しないリストを作る方法
HTML：
<div class="col-left">
<div class="line-left"></div>
<ul class="faqs">
<li class="sel"><a href="#">What is a notification?</a>
<p class="faq">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat. </p>
</li>
<li><a href="#">How do I know if I’m eligible for notifications?</a>
<p class="faq">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat. </p>
</li>
<li><a href="#">Will I see all notifications?</a>
<p class="faq">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat. </p>
</li>
</ul>
</div>
<div class="col-right">
<div class="line-right"></div>
<ul class="faqs">
<li><a href="#">How often are notifications sent?</a>
<p class="faq">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat. </p>
</li>
<li><a href="#">How do I receive notifications?</a>
<p class="faq">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat. </p>
</li>
<li><a href="#">What will I actually see in the notifications?</a>
<p class="faq">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat. </p>
</li>
</ul>
</div>
CSS：
ul.faqs {
list-style-type: none;
padding: 0;
margin: 0;
}
li {
display: block;
width: 470px;
height:auto;
height: 56px;
line-height:56px;
border-bottom: 1px solid #d8d8d8;
}
li a {
display: block;
font-family: "helvetica-75-bold";
font-size:16px;
color:343366;
text-decoration: none;
}
li a:after {
content: "";
display: inline-block;
width:41px;
height:22px;
background: url(../images/../images/DropDownCarat.svg) no-repeat;
float: right;
position: relative;
top: 19px;
}
li a:hover:after {
content: "";
display: inline-block;
width:41px;
height:22px;
background: url(../images/../images/DropDownCarat-hov.svg) no-repeat;
float: right;
position: relative;
top: 19px;
}
li.sel {
height: auto;
}
li.sel p {
margin-top: -5px;
line-height: 19px;
margin-bottom: 20px;
color: #595959;
visibility: visible;
}
p.faq {
visibility: hidden;
}
li.sel a:after {
content: "";
display: inline-block;
width:41px;
height:22px;
background: url(../images/../images/DropDownCarat.svg) no-repeat;
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
transform: rotate(-180deg);
margin-right:20px;
}
li.sel a:hover:after {
content: "";
display: inline-block;
width:41px;
height:22px;
background: url(../images/../images/DropDownCarat-hov.svg) no-repeat;
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
transform: rotate(-180deg);
margin-right:20px;
}
@media (max-width:960px){
.faqs-title {
padding-left: 30px;
padding-bottom: 35px;
}
.content-faqs {
width: 100%;
margin:0 auto;
padding-left:30px;
padding-right:30px;
height: 500px;
}
.col-left {
width: 100%;
float:none;
margin-right: 30px;
}
.col-right {
width: 100%;
float:none;
}
.line-left {
width: 100%;
height:1px;
background-color:#d8d8d8;
}
.line-right {
display: none;
}
li {
display: block;
width: 100%;
height;auto;
border-bottom: 1px solid #d8d8d8;
}
}
お返事ありがとうございます。ブラウザが509ピクセル幅になると、これは機能しません。下向きの矢印が次の行に折り返します。ブラウザーが465ピクセル幅になると、テキストは56ピクセルの行の高さのために低すぎます。どのようにこれを修正することができますので、下矢印は正しい行の中に留まりますが、同時に必要なときにテキストを折り返すことができます。ありがとう！ – user3162058
2番目の列はまだ右側にありますが、最初の列の下に押し下げられているように見えますが、上記のように矢印の折り返しと線の高さがあまりにも早い問題があります。助けてくれてありがとう！ – user3162058
私は下向きの矢印の折り返しは、見出しの後ろにあるという事実によると思います。したがって、たとえあなたがそれらを浮動させたとしても、それらは、前の行が終わる点に対して相対的に位置付けられます。私は、これは見出しのためのスパンクラスを作成し、それを浮かべることで解決できると思います。その後、見出しの幅を設定して、キャレットが右に折り返されるようにします。 – Jeff