将文本和图像放在列表项中的同一行 - html/css
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16998947/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
putting text and images on same line within a list item - html/css
提问by Pectus Excavatum
I was wondering if anyone could help me out with a small html/css issue I am having. Basically, I am trying to make a unordered list with a different image for the bullet of each list item, with a text to the right on the same line. More specifically, a header on the top line and some normal text below. At the moment, I can get the image and the text on the same line :-( Here is my code.
我想知道是否有人可以帮助我解决我遇到的一个小的 html/css 问题。基本上，我正在尝试为每个列表项的项目符号制作一个具有不同图像的无序列表，并在同一行右侧有一个文本。更具体地说，顶行的标题和下面的一些普通文本。目前，我可以在同一行上获取图像和文本:-( 这是我的代码。
Any help would be greatly appreciated.
任何帮助将不胜感激。
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:
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;
}
回答by Venkat Selvan
While using
使用时
display:inline-block;
显示：内联块；
don't use
不要使用
float:left;
向左飘浮;
Try
尝试
.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;
}
Here is the Link to Fiddle
回答by andreacanton
I discourage the "tabluar aproach". Tables are for tables. Use <div>instead.
我不鼓励“tabluar 方法”。桌子是桌子用的。使用<div>来代替。
I simply turn the <a>in a blockelement and wrap the content in a <div>and floatboth left.
我只是简单地将<a>in变成一个块元素并将内容包裹在 a 中，<div>然后将两者都向左浮动。
HTML:
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:
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
这是可编辑的代码：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.
注意：<ul>浏览器不会正确计算高度，因为包含浮动元素。所以你应该添加一些clear:both <div>或强制<ul>元素的高度。
回答by General Omosco
.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>This is okay using both media query, you can re-scale it to your likeness
使用两个媒体查询都可以，您可以根据自己的喜好重新缩放它
