3

我想知道是否有人可以帮助我解决我遇到的一个小 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;
}
4

3 回答 3

8

使用时

显示：内联块；

不要使用

向左飘浮;

尝试

.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;
}

这是小提琴的链接

于 2013-06-08T11:31:24.853 回答
2

I discourage the "tabluar aproach". Tables are for tables. Use <div> instead.

I simply turn the <a> in a block element and wrap the content in a <div> and float both left.

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;
}

Here's the editable code: http://codepen.io/andreacanton/pen/lykDA

Note: the height of the <ul> will not be proper calculated by the browser because contain floated elements. So you should add some clear:both <div> or force the height of the <ul> element.

于 2013-06-10T17:14:49.613 回答
0 

.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>

使用这两种媒体查询都可以，您可以根据自己的喜好重新缩放它

于 2018-05-13T12:21:41.497 回答