0 0

如何实现如图样子的CSS?15

实在是不懂CSS,求教。

如何将几个元素水平布局在同一行上?且水平垂直居中




基本html如下:

<div id="dish">
  <h3>Quantity</h3>
  <img id="minus" src="img/btn_minus.png" />
  <input id="num" type="text" value="1" readonly>
  <img id="plus" src="img/btn_plus.png" />
</div>
2014年5月09日 10:55
  • 大小: 2.5 KB

6个答案 按时间排序 按投票排序

0 0

采纳的答案

2014年5月09日 13:16
0 0


可以直接用表格的哇。。。。很多排版问题都是可以用表格解决的哦

2014年5月19日 17:18
0 0

Dreamweaver  搞这些CSS 还是用这个 不然蛋疼菊紧天天有

2014年5月14日 02:48
0 0

<div id="dish">
    <table>
        <tr>
            <td> <h3>Quantity</h3></td>
            <td > <img id="minus" src="img/btn_minus.png" style=" vertical-align:middle"/></td>
            <td valign='middle'> <input id="num" type="text" value="1" readonly style="width:10px;"></td>
            <td> <img id="plus" src="img/btn_plus.png" style=" vertical-align:middle"/></td>
        </tr>

    </table>
</div>

div里面加入table,并且给img设置style=‘vertical-align:middle’

2014年5月10日 14:26
0 0

直接table表格不就行了。。

2014年5月09日 16:43
0 0

可以用ul 里面放置li
设置li里面的line-height: 25px;

2014年5月09日 10:59

相关推荐

    css 3 动画实实现点赞动画

    在“css 3 动画实实现点赞动画”中,我们主要利用了`@keyframes`规则和`transform`属性来创建一个互动式的点赞动画。下面我们将详细探讨这两个核心概念。 1. **@keyframes 规则**: `@keyframes`是CSS 3中的一个...

    css3实现的3D图片展示效果

    本示例“css3实现的3D图片展示效果”正是利用了CSS3的强大功能,为用户提供了引人入胜的视觉体验。在支持CSS3的浏览器中,这种3D图片展示特效能够为网站增添独特的魅力,吸引用户的注意力,提高用户体验。 首先,...

    利用HTML、CSS 实现带表情的评论框的制作教程

    图1显示了评论框的原始状态,即没有表情插入时的样子;而图2则展示了当用户点击表情按钮后出现的表情列表。用户可以从中选择一个或多个表情,并将它们添加到评论中。 为了实现这个功能,Json数据被用来加载表情图标...

    7款非常漂亮的CSS3鼠标hover图片动画特效

    这些特效是基于一个名为"magic.css"的库实现的,它为开发者提供了丰富的选择,使得网页中的图片在鼠标悬停时能展现出动态且吸引人的视觉效果。 首先,我们来了解CSS3的基本概念。CSS3是层叠样式表的第三个版本,它...

    CSS3图片动画.zip

    本教程将深入探讨如何使用CSS3来实现图片动画,特别是PNG序列图动画,通过模仿腾讯网LOGO的动态效果来阐述这一技术。 首先,我们要理解CSS3动画的基础——`@keyframes`规则。`@keyframes`定义了一个动画的过程,它...

    懒人原生纯CSS实现梅花图案

    看起来图案好像很复杂的样子,其实这里只需要弄懂一个CSS3的属性 一切都迎刃而解了,那就是border-radius属性,后面跟着四个值 分别指 左上角 右上角 右下角 左下角 四个角度的border而已 控制好他们的...

    用css把a链接模拟成button的样子的方法

    通过以上CSS代码的应用,`&lt;a&gt;`标签在网页中将呈现出类似按钮的外观,并且在用户与其交互时会有不同的视觉反馈,如颜色变化、边框风格的变化等,这大大提升了用户的体验感。 #### 五、总结 通过使用适当的CSS属性和...

    闪光字网页特效CSS

    标题中的“闪光字网页特效CSS”指的是在网页设计中,通过使用CSS(层叠样式表)来实现文字的动态发光闪烁效果。这种效果通常用于吸引用户的注意力或者为网站增添一些视觉上的趣味性。CSS是一种样式表语言,用于描述...

    css3d演示html

    1. **CSS3D_screenshot.jpg**:可能是展示了使用CSS3D技术创建的3D效果的截图,帮助理解实际呈现的样子。 2. **readme.txt**:可能包含有关示例的说明,如如何运行、代码解释或其他重要提示。 3. **CSS3D**:这是...

    CSS技巧专栏每日一例:1-CSS实现会讨好的热情按钮.zip

    资源介绍: 纯CSS实现的动态按钮特效,不知道资源样子的,可以去我的专栏看一下图片。文件名就是文章名:CSS技巧专栏每日一例:1-CSS实现会讨好的热情按钮.zip 资源特点:代码短小、代码容易阅读、重点注释、方便...

    纯css3实现思维导图样式示例

    思维导图又称之为脑图 ...网上大部分实现有用d3.js实现,有手动用svg实现,最近工作需要,本人很懒,在琢磨看看用css3能不能实现呢? 答案是肯定的 下面上代码 html代码 &lt;h1&gt;node1 &lt;h1&gt;node2 &lt;div class=

    纯CSS3实现鼠标滑过圆形图片旋转翻盖动画特效源码.zip

    本资源“纯CSS3实现鼠标滑过圆形图片旋转翻盖动画特效源码.zip”提供了一种利用CSS3特性创建独特交互效果的方法,特别适用于提升网站或应用的用户体验。以下将详细解释这个特效的实现原理和涉及的关键CSS3知识点。 ...

    CSS3教程(5):网页背景图片

    现在它在CSS3中被重视,我们可以应用多背景图和背景图片尺寸来实现更完美的效果。 背景图片/纹理有很多种使用方式,常常用于添加网站的最佳的最终美化。现在它在CSS3中被重视,我们可以应用多背景图和背景图片尺寸来...

    纯CSS3实现人物摇头动画

    这次我们要来分享一款超级可爱的纯CSS3人物摇头动画,初始化的时候人物的各个部位是利用CSS3动画效果拼接而成,接下来就是人物听音乐的场景,一边听音乐一边摇着脑袋,十分陶醉的样子,周围还会出现跳动的音符动画。

    5款CSS3图标鼠标悬停效果

    `index.jpg`可能是示例图或者预览图,用来展示这些效果的样子;`使用方法.txt`应该详细解释了如何将这些效果应用到自己的项目中;`懒人图库.txt`和`懒人图库.url`可能是提供额外图标资源的信息或者链接;`css`文件夹...

    Apple官网html+css实现.zip

    用的是纯css html做的一个小项目,总共1000行代码左右,并且用媒体查询写了PC端和M端即手机端和电脑端的官网,用谷歌浏览器打开,右击鼠标点一下检查,然后调一下屏幕的像素大小,该文件当像素在700以下时时手机端,...

    CSS常用英语词汇大全

    CSS中的 `cursor` 属性用于改变鼠标光标在某些元素上出现的样子。 - **Dashed** [dæʃt] - 虚线。CSS中的 `border-style: dashed;` 可以设置元素的边框为虚线样式。 - **Decimal** ['desiməl] - 十进制。CSS中的...

    不错的菜单导航,并且是管理后台的样子哦 css

    标题中的“不错的菜单导航,并且是管理后台的样子哦 css”暗示了这个压缩包包含的是一套用于构建管理后台界面的CSS样式代码。管理后台通常需要清晰、高效的导航系统,以便用户(通常是管理员或工作人员)能够方便地...

    CSS线性渐变的凹面矩形过渡动效的实现

    实现这个样式的灵感来自网上一篇使用css实现内凹角的文章,描述如何实现chrome标签页的内凹角效果,大概是下面这样子: 使用 radial-gradient 径向渐变来实现,将渐变的模糊距离缩小到0就能看到清晰的圆形界限。 ...

    css_menu.zip_CSS ME_css

    这个“css_menu”示例可能包含了一些高级技巧,如使用伪类、Flexbox或Grid布局来实现更复杂的布局效果。 总之,通过熟练掌握CSS,我们可以创建出各种风格的下拉菜单,满足不同网页设计的需求。这个“css_menu.zip_...

Global site tag (gtag.js) - Google Analytics