web-dev-qa-db-ja.com

リストアイテム内の同じ行にテキストと画像を配置する-html / css

私が抱えている小さなhtml/cssの問題について、誰かが私を助けてくれるかどうか疑問に思っていました。基本的に、各リストアイテムの箇条書きに異なる画像を使用し、同じ行の右側にテキストを使用して、順序付けされていないリストを作成しようとしています。具体的には、一番上の行のヘッダーとその下の通常のテキストです。現時点では、画像とテキストを同じ行で取得できます:-(これが私のコードです。

どんな助けでも大歓迎です。

HTML：

<ul>
    <li class="service-list">
        <a href=""><img src="image.png" alt="icon" class="alignnone size-full wp-image-156" /></a>
        <h3>Header</h3>
        <p>
        text goes here
        </P>
    </li>
....
</ul>

CSS：

.service-list {
    list-style-type: none;
    margin-left:0px;
    padding-left:0px;
    float: left;
    display: inline-block;
}


.service-list p {
    text-align: right; 
    margin: 0; 
    padding: 0;
}
htmllistcsshtml-lists
3
Pectus Excavatum

使用中

display：inline-block;

使用しないでください

float：left;

試してみてください

.service-list {
list-style-type: none;
margin-left:0px;
padding-left:0px;
display: inline-block;
}

.service-list img
{
float:left;
}

.service-list p,.service-list h3 {
text-align: right; 
display:inline-block;
padding: 0;
}

これが フィドルへのリンク

7
Venkat Selvan

私は「タブルアアプローチ」を思いとどまらせます。テーブルはテーブル用です。代わりに<div>を使用してください。

<a>をblock要素に変換し、コンテンツを<div>とfloatでラップするだけです。両方が残った。

HTML：

<ul id="services-list">
<li>
  <a href="http://www.google.com" class="image">
    <img src="http://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_square-24.png" alt="Facebook Icon" />
  </a>
  <div class="content">
    <h3>Header</h3>
    <p>text goes here</p>
  </div>
</li>
<li>
  <a href="http://www.google.com" class="image">
    <img src="http://cdn1.iconfinder.com/data/icons/socialmediaicons_v120/24/facebook.png" alt="Facebook Icon" />
  </a>
  <div class="content">
  <h3>Header</h3>
  <p>text goes here</p>
  </div>
</li>
</ul>

CSS：

/*a little bit of reset*/
#services-list, #services-list p, #services-list h3 {
list-style: none;
margin:0; padding:0;
}

#services-list > li{
  float:left;
  margin-right: 20px;
  width: 130px;
}

#services-list > li > .image{
  display:block;
  float:left;
  margin-right:10px;
}

/*
this instructions are to force the dimensions of image and its container <a>
*/
#services-list > li > .image,
#services-list > li > .image > img{
  width:24px; height:24px;
}

編集可能なコードは次のとおりです。 http://codepen.io/andreacanton/pen/lykDA

注：<ul>の高さは、浮動要素が含まれているため、ブラウザーによって適切に計算されません。したがって、clear:both <div>を追加するか、<ul>要素の高さを強制する必要があります。

2
andreacanton
.items-list {
box-shadow: -2px 1px 14px #e5e6e8;
list-style-type: none;
margin-left:0px;
padding-left:0px;
margin-bottom:15px;
width:100%;
}


@media only screen and (max-width:400px)  {
.items-list {
height:110px;
}
.items-list .kmtext {
  padding-bottom:6px;
}
.items-list img
{
float:left;
 width:40%;
 height:100%;
 margin-right:7px;
}
.items-list .righttxt {
 width:100%;
padding: 5px;
}
}
@media only screen and (min-width:401px) and (max-width:500px)  {
.items-list {
height:200px;
}
.items-list .kmtext {
  padding-bottom:20px;
}
.items-list img
{
float:left;
 width:45%;
 height:100%;
 margin-right:7px;
}
.items-list .righttxt {
 width:100%;
padding: 15px;
}
}

@media only screen and (min-width:501px) and (max-width:700px)   {
.items-list {
height:250px;
}
.items-list .kmtext {
  padding-bottom:20px;
}
.items-list img
{
float:left;
 width:45%;
 height:100%;
 margin-right:7px;
}
.items-list .righttxt {
 width:100%;
padding: 40px;
}
}
@media only screen and (min-width:701px) and (max-width:1399px)  {
.items-list {
height:300px;
}
.items-list .kmtext {
  padding-bottom:20px;
}
.items-list img
{
float:left;
 width:45%;
 height:100%;
 margin-right:7px;
}
.items-list .righttxt {
 width:100%;
padding: 50px;
}
}
@media only screen and (min-width:1400px) {
.items-list {
height:330px;
}
.items-list .kmtext {
  padding-bottom:20px;
}
.items-list img
{
float:left;
 width:45%;
 height:100%;
 margin-right:7px;
}
.items-list .righttxt {
 width:100%;
padding: 60px;
}
}
.items-list img
{
 object-fit: cover;
border-right: 5px solid;
border-image:   linear-gradient(to bottom, #86DF7B 50%,#7BAADF 50%) 2;
}

.items-list .kmtext {
  color:#26b7a1;
  font-size:80%;
    overflow: hidden;
    text-overflow: Ellipsis;
    display: -webkit-box;
    line-height: 21px;
    max-height: 48px;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.items-list .pricetext {
  color:#020202;
  font-weight:bold;
  padding-bottom:6px;
  font-size:120%;
    overflow: hidden;
    text-overflow: Ellipsis;
    display: -webkit-box;
    line-height: 21px;
    max-height: 48px;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.items-list .titletext {
  color:#919396;
    overflow: hidden;
    text-overflow: Ellipsis;
    display: -webkit-box;
    line-height: 21px;
    max-height: 48px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
<ul>
<li class="items-list">
<a href="http://jsfiddle.net/7s50ps6q/3/"><img src="https://apollo-ireland.akamaized.net/v1/files/rf81eztjcij11-NG/image;s=272x0" alt="icon" width="200" height="auto" /></a>

<div class="righttxt">
<div class="kmtext">
  62KM
</div>
<div class="pricetext">
  64N
</div>
<div class="titletext">
  This is title here
</div>
</div>
</li>
<li class="items-list">
<a href="http://jsfiddle.net/7s50ps6q/3/"><img src="https://apollo-ireland.akamaized.net/v1/files/rf81eztjcij11-NG/image;s=272x0" alt="icon" width="200" height="auto" /></a>

<div class="righttxt">
<div class="kmtext">
  62KM
</div>
<div class="pricetext">
  64N
</div>
<div class="titletext">
  This is title here
</div>
</div>
</li>
</ul>

これは両方のメディアクエリを使用して問題ありません、あなたはそれをあなたの肖像に再スケーリングすることができます

0
General Omosco