CSS不适用于页脚angularjs答案

【问题标题】：CSS is not applied on footer angularjsCSS不适用于页脚angularjs
【发布时间】：2016-04-07 21:39:30
【问题描述】：

我已经为此苦苦挣扎了两天，虽然它看起来很简单。正如您在此处看到我在图片中创建的页脚：

我有两个问题：

我似乎无法对文本内的页脚应用任何 css 修改（“Capgemini 新人申请”）
如果不截取徽标或在页面内容和页脚之间应用边距，我无法添加一条线将页面的其余部分与页脚分开，如下图所示：

HTML 代码

<ion-footer-bar class="bar">
  <img src="img/Imag.png" class="test2" />
  <div class="text"> Capgemini Newcomer Application </div>
  <img src="img/Test3.png" class="test"/>
</ion-footer>

CSS 代码

.bar {

    position: absolute;
    margin-top: 20px;
    height: 50px;
    border-top: 2px solid #FBC02D;

}

.bar .test {
    float: right;
    clear: left;
    position: fixed;
    max-width: 130px;
    max-height: 100px;
    right: 0;
    bottom: 2px;
}


.bar .test2 {

    width: 40px;
    height: 40px;
    bottom: 20px;
}

.bar .text {

    text-align: center;
    font-size: 6;
    bottom: 2px;

}

编辑

做了下面提到的修改后，我得到了这个：

【问题讨论】：

你能创建一个JSFiddle
1.) 你能提供一个演示页面，我们可以在其中查看呈现的模板吗？ ion-footer-bar 是一个可以修改实际 HTML 输出的指令 2。）第二个问题似乎是徽标（透明度）的问题，纯 CSS 无法解决任何问题。
你不能以百分比（75%）的形式给出你的栏的宽度吗？
没有。整个栏会随着图片一起缩小

标签： html css angularjs ionic-framework

【解决方案1】：

<ion-footer-bar ng-class="{'bar': true}">...</ion-footer>

【讨论】：

OP 在这里没有说明任何关于 AngularJS 的内容。
里面有一个angular标签（这就是我回答它的原因），它现在已经被编辑了（你可能想检查编辑历史）
@A.Sharma OP 显然使用了 Ionic 框架，它集成了 AngularJS。
请您解释一下您的回答？它也不起作用：/
使用 ng-class="{'bar': true}" 而不是 class 应该可以工作，true 在其中（通常这是一些表达式/条件的地方，当计算为 true css 类 @ 987654328@ 被应用）将应用 css 而false 不会

【解决方案2】：

您的 CSS 有几个问题与您预期的不同：

.bar {
    position: absolute;
    margin-top: 20px; /* doesn't do anything for position: absolute */
    height: 50px;
    border-top: 2px solid #FBC02D; /* <-- this will always add the border outside the footer */
}

.bar .test {
    float: right;
    clear: left;
    position: fixed; /* <-- either you float it, or you position it fixed - both together don't make sense */
    max-width: 130px;
    max-height: 100px;
    right: 0;
    bottom: 2px;
}

.bar .test2 {
    width: 40px;
    height: 40px;
    bottom: 20px; /* <-- "bottom" on a non-positioned element doesn't do anything */
}

.bar .text {
    text-align: center;
    font-size: 6; /* <-- font size needs a unit like "px" or "pt" */
    bottom: 2px; /* same as above, this should probably be margin-bottom instead */
}

清理一下，可能是这样的：

.bar {
    position: absolute;
    height: 50px;
}

.bar .test {
    position: fixed;
    max-width: 130px;
    max-height: 100px;
    right: 0;
    bottom: 2px;
}

.bar .test2 {
    width: 40px;
    height: 40px;
    margin-bottom: 20px;
}

.bar .text {
    text-align: center;
    font-size: 6pt;
    margin-bottom: 2px;
    border-top: 2px solid #FBC02D;
}

这仍然会使徽标与边框重叠，但这是您需要在徽标图像中解决的问题。

【讨论】：

感谢您的帮助。我将更新结果，但我仍然无法编辑文本以使其居中