html - CSS float 和宽度

标签 html css

我想知道为什么向盒子添加“宽度”元素会破坏“ float ”的效果。

例如,当我有

.login form { 
    float: right;
    background-color: green;
 }

所有元素都向右移动,背景颜色只包围那里的元素(它不会像我想要的那样在屏幕顶部创建一个绿色条)。我想我可以通过设置宽度来改善这个问题,

… width: 800px; …..

但是虽然我通过在屏幕顶部设置条纹得到绿色,但我的所有框元素似乎都向左浮动,所以我有一个绿色栏,其中登录元素位于左侧而不是右侧。

有人能告诉我如何使用我的 .login 框元素,证明它在右边的所有五个属性(文本字段、框和按钮),并且在顶部仍然有一个绿色条即使只有空白区域也能显示屏幕。

最佳答案

尝试使用 padding-left:(something px) ;而不是宽度:800px;可能会解决这个问题

可能导致此问题的原因是您正在使用覆盖 div 的全部容量,这使得向右浮动毫无用处,因为没有任何东西可以 float

关于html - CSS float 和宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26716768/

相关文章:

javascript - ng-class 的 css 过渡效果

Webkit按钮: background color overflows round corners

css - 在 div 上设置 CSS 100% 高度

html - Bootstrap col-md-offset-* 不工作

javascript - HTML/Javascript - 如何将输入字段中的文本显示为 HTML 代码?

javascript - 选择特定单选框时使用 jquery 禁用循环中的文本框

html - <button> 与 &lt;input type ="button"/>。使用哪个?

html - 在垂直居中后水平居中跨度

css - Safari 中是否存在线性渐变的错误?我得到意想不到的结果

html - css 阴影未正确应用在图像底部