为什么我的input不水平对齐？ - ITeye问答

问答首页 → Web前端技术

0 0

为什么我的input不水平对齐？10

如图：

我想让那个input与加减号对其，可总是下去了一点点，怎么办？

基本html：

<ul style="padding:0;margin:0;">
	<li style="padding:0;margin:0;">
        <div style='height:28px;line-height:28px;width:100%;background:red;'>
            <span style='float:left;width:50%'>brandDishName</span>
            <span style='width:100px;'>
                <img src='img/btn_minus.png'>
                <input type='text' style='width:28px;height:28px;color:black;' value='1' />
                <img src='img/btn_plus.png'>
              
            </span>
            <span style='float:right'>$money</span>
        </div>
    </li>
   
</ul>

问题补充：我试过用margin-top: -5px，可是一点效果也没有。

JavaScript CSS jQuery HTML5

2014年5月30日 16:41

gundumw100
87
0 0 10

查看图片附件

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

0 0

采纳的答案

给两个img标签添加 align="absmiddle"，我试了下，基本能够对齐的，实在不行，给上级标签设置相对定位，再给input设置绝对定位

2014年6月04日 10:50

haiyangyiba
42
0 0 5

1条评论

0 0

多调节margin,padding和父容器的line-height来试试，好多浏览器对input的默认属性都不一样

2014年6月02日 11:22

coca
30
0 1 1

添加评论

0 0

你的input的高度可以调小点，input 可以用margin-top: -5px 让它上去。慢慢调

2014年5月30日 18:05

心跳-频率
30
0 0 1

2条评论

相关推荐

radio和文字垂直对齐: radio和文字垂直对齐，单选框和文字垂直对齐，兼容各大主流浏览器，附带样例代码，一看就会，一用网不了！呵呵

CCS实现input和img水平对齐的方法: 首先，我们需要理解为什么默认情况下，img标签会比input标签高出一部分。这是因为浏览器的默认样式中，img标签有一个`vertical-align`属性，默认值通常为`baseline`，这意味着图片会根据其基线与其他文本元素对齐，...

表单元素对齐: 这种对齐方式通常涉及水平对齐和垂直对齐两个方面。二、水平对齐 1. 居中对齐：可以使用CSS的`text-align: center;`属性将表单元素整体居中。 2. 左对齐或右对齐：使用`text-align: left;`或`text-align: right;`...

Input标签与图片按钮水平对齐解决方法: 上述方法是通过给图片按钮添加一个特定的CSS类，并设置这个类的vertical-align属性为middle来实现input标签与图片按钮的水平对齐。这样，无论是在纯HTML还是在.NET等开发平台上，都可以有效解决元素对齐的问题。 ...

inputType参数类型说明: 布尔类型的inputType参数用于设置控件的水平居中、垂直居中、相对于父元素完全居中等属性。常见的布尔类型inputType参数有： * android:layout_centerHorizontal：水平居中 * android:layout_centerVertical：垂直...

input文本框和img验证码对齐问题(img总比input高出一个头): 这段CSS代码会确保`<input>`和`<img>`元素的底部中线对齐，从而实现水平对齐。这种方法适用于大多数情况，尤其是当元素的大小固定或者不需要根据内容调整大小时。然而，需要注意的是，`vertical-align: middle`...

css中使input输入框与img(图片)在同一行居中对齐: 在CSS布局中，将不同的元素如input输入框与img图片进行水平居中对齐是一项常见的需求。尤其是在网页设计中，为了达到美观和用户体验的效果，往往需要确保这些元素在一行内对齐。在处理input和img元素时，由于浏览器...

使用vertical-align实现input和img对齐: 这使得`<input>`和`<img>`在同一行内保持一致的垂直位置，达到水平对齐的效果。理解`vertical-align`的其他可选值也很重要，例如： - `baseline`: 元素的基线与行的基线对齐。 - `top`: 元素的顶部与行的顶部对齐...

kivy_TextInput.rar: 9. **文本对齐方式**：`halign`和`valign`属性用于设置文本在输入框中的水平和垂直对齐方式。 10. **禁用状态**：`disabled`属性可以将`TextInput`设为禁用状态，用户无法修改其中的文本。通过本项目的源码实践，...

js获取input长度并根据页面宽度设置其大小及居中对齐: - 在CSS中，可以使用`text-align`属性来控制文本的水平对齐方式。将`text-align`设置为`center`，即可让输入框内的文字居中显示： ```html <input type="text" style="text-align: center;" /> ``` - 如果需要...

14种CSS3炫酷表单input输入框美化效果: 4. **阴影效果**：`box-shadow`属性可为输入框添加阴影，营造立体感，使其在页面上更加突出。 5. **文字效果**：利用`text-shadow`可以实现文字的阴影效果，`text-indent`和`text-align`可以控制文字的对齐和缩进，...

并排的两个对象如何水平对齐兼容ie6: 本文将深入探讨如何使并排的两个对象（例如，一个复选框和一段文本）在IE6及其他浏览器中实现水平对齐。首先，让我们回顾一下问题的描述：一个复选框与一串文字需要在同一行内水平对齐，但在不同的浏览器中可能会...

CSS如何对齐文本框和其旁边的图像按钮比如搜索框等等: 在大多数情况下，可以使用绝对定位方法来确保垂直对齐，并通过微调`margin`或`padding`属性来实现水平对齐。为了更好的兼容性和灵活性，推荐使用现代的CSS布局技术，例如弹性盒子（Flexbox）和网格（Grid），它们...

怎样对齐文本框和图像(image)按钮实现三点一线: 虽然文章中提到的解决方法主要是针对竖直方向的对齐问题，但在实际应用中，水平方向上的对齐也需要关注。在不同的浏览器中，元素之间可能存在微小的间隔。这通常可以通过调整`padding`或`margin`来解决。尽管水平...

表单元素和文字垂直居中对齐问题解决整理: 然而，在IE6和IE7中，可能还需要进行特定的浏览器hack，比如在这里，可能需要将单选框的垂直对齐调整为`*vertical-align: -1px`，复选框调整为`*vertical-align: -2px`，以确保在这些浏览器中的效果与标准浏览器一致...

利用vertical-align:middle实现行内元素的水平垂直居中对齐: 在Web开发中，实现元素的水平垂直居中对齐是一个常见的布局需求。传统上，我们会使用Flexbox或CSS Grid等现代CSS布局技术来实现这一目标。但是，利用`vertical-align:middle`属性也能达到类似的效果，并且在某些情况...

css-text 教程: **水平对齐**：`text-align`属性用于控制文本的水平对齐方式。常见的值包括`left`（左对齐）、`right`（右对齐）、`center`（居中）和`justify`（两端对齐）。例如： ```css p { text-align: center; } ``` 这会让...

Ask-but

我的问答 FAQ | 勋章

相关推荐

已解决问题

未解决问题

排行榜

查看全部排名>>

Global site tag (gtag.js) - Google Analytics