HTML5中怎样让图片和文字处在同一行中

今天用HTML5做了一个手机APP上的页面,对于怎样让文字和图片始终能在同一行的问题很是苦恼,经多方咨询终于做出了让自己满意的效果,现在就来将分享给大家。

操作方法

  • 01

    首先我们先打开自己的DreamWeaver软件,新建一个html5页面,然后命名,保存。

  • 02

    然后我们先进行简单的页面布局。在body部分加入一个div,里面添加ul和li的嵌套。

  • 03

    我们在li标签中添加部分内容,并设置其宽度为100%,即充满整个屏幕,高度为固定值。

  • 04

    然后我们找到已经做好的图片,注意图片尽量选择正方形的,大小为30×30px.

  • 05

    若想让图片和文字在同一行,不管页面怎样变化二者都要处在同一行,就需要我们将图片作为li标签的背景图片。

  • 06

    这样文字会将图片覆盖,我们还需要为li标签设置一个左侧的内边距,以保证文字在图片的左边。(由于图片的大小已经是固定值了,左边距的大小我们也可以将其设为固定的)

  • 07

    再在li标签下面添加一条横线,并将背景图片进行定位,这样我们可以看到很好的效果。证实文字和图片是在同一水平线上的。

  • 08

    想让文字和图片在同一水平线上,总结起来就是将图片设为背景图片,并添加padding-left,然后定位一下图片的位置。

(0)

相关推荐

  • 美图秀秀中如何给图片添加文字边框

    有的小伙伴在使用美图秀秀软件时,喜欢给图片添加边框,那么如何添加文字边框呢?小编就来为大家介绍一下吧.具体如下:1. 第一步,双击或者右击打开美图秀秀软件.2. 第二步,来到美图秀秀软件主页面后,点击 ...

  • 在PS Photoshop软件中怎么将图片导入文字字体中

    今天给大家介绍一下在PS Photoshop软件中怎么将图片导入文字字体中的具体操作步骤.1. 打开电脑,找到桌面上的PS软件,双击打开.2. 然后选择新建一个空白文档,如图进行设置,最后确定.3. ...

  • WPS演示中如何设置图片和文字的渐变效果

    WPS演示中可以设置图片和文字的渐变效果,目的是使得幻灯片更加炫酷醒目,下面一起来看看如何操作吧! 操作方法 01 打开一个演示文稿,双击形状,右侧会出来填充设置选项. 02 系统默认的是纯色填充,点 ...

  • ps中怎样用图片覆盖文字

    Photoshop主要处理以像素所构成的数字图像.使用其众多的编修与绘图工具,可以有效地进行图片编辑工作.ps中怎样用图片覆盖文字,让小编教给你指南. 操作方法 01 打开ps软件. 02 新建一块画 ...

  • 手机微信中聊天记录的图片怎么批量导出到电脑中

    我们在手机中使用微信的时候,想要将手机中收到的图片导出到电脑中,该怎么操作呢?今天就跟大家介绍一下手机微信中聊天记录的图片怎么批量导出到电脑中的具体操作步骤.1. 首先我们需要将手机和电脑使用数据线连 ...

  • word中如何用图片隐藏文字

    可能大家会用隐藏命令隐藏文字的方法,但是用图片遮盖的方法想必没有试过吧?那么下面就由学习啦小编给大家分享下word中用图片隐藏文字的技巧,希望能帮助到您. word中用图片隐藏文字的步骤如下: 步骤一 ...

  • word2007中如何将图片和文字绑定

    对于一篇图文并茂的word文档,有时候我们已经对它进行了排版,但是当我们再对其部分内容进行修改时,图片和文字的位置有可能就会再次变乱,发生错位.那么如何避免这种情况发生呢?将图片和文字进行绑定就可以很 ...

  • 在Word中如何给图片注解文字

    当在进行文档编辑时,如何给图片注解文字呢?下面一起来学习下 操作方法 01 启动电脑,打开Word 2003,如图所示 02 在文档中插入一张图片,如图所示 03 鼠标右键点击图片,在下拉菜单选择&q ...

  • WPS中如何将图片置于文字下方?

    将图片导入文档后,图片只能紧靠文字,而无法置于文字下方,那么如何将图片置于文字下方呢? 操作方法 01 点击图片,右键,选择"设置对象格式"如图.或直接双击图片. 02 在&quo ...