В нижнем колонтитуле этого html файла у меня есть 3 кнопки.
На первом изображении показано, как расположены 3 кнопки.
Второе изображение показывает, когда средняя кнопка нижнего колонтитула закомментирована.
Третье изображение - это когда ng-hide = "true" на средней кнопке.
Как у меня нет пробела между кнопками "Нет" и "ДА", когда середина ngHide (n)? благодаря
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
height: 1%;
}
header > button {
height: 1.5em;
width: 1.5em;
font-size: 1.5em;
top: 0;
}
label.pageTitle {
display: inline-block;
width: calc(100% - 5em);
text-align: center;
}
header {
border-bottom: 1px solid black;
width: 100%;
position: fixed;
top: 0;
}
main, .mainMenu {
position: absolute;
top: 2.5em;
}
main {
z-index: -2;
width: 100%;
}
footer {
position: fixed;
bottom: 0;
width: 100%;
}
footer > button {
font-size: 1em;
padding: 0.5em 1em;
}
section {
text-align: center;
}
input {
font-size: 1em;
padding: 0.25em;
margin: 0.5em;
width: 90%;
}
header, footer {
background-color: white;
}
.horizontal-style {
display: table;
width: 100%
}
.horizontal-style li {
display: table-cell;
padding: 2px;
}
.horizontal-style button {
display: block;
border: 1px solid black;
text-align: center;
background: #dfdfdf;
}
footer button {
width: 100%;
border-radius: 6px;
font-size: 1.5em;
}
.mainMenu {
padding-left: 1em;
background-color: #dfdfdf;
width: 70%;
border-radius: 0 6px 10px 0;
z-index: -1;
}
ul {
list-style-type: none;
}
ul li img {
vertical-align: middle;
padding-right: 0.25em;
}
a {
display: block;
padding: 1em 0em;
}
<!doctype html>
<html lang="en" ng-app="appModule">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<meta name="viewport" content="width=device-width" />
<base href="http://localhost:63342/students/">
<!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js"></script>-->
<!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-route.js"></script>-->
<script src="angular.js"></script>
<script src="angular-route.js"></script>
<script src="app.js"></script>
<script src="services/routing.js"></script>
<script src="services/menuToggle.js"></script>
<script src="controllers/menuToggleCtrl.js"></script>
<script src="controllers/mainMenuCtrl.js"></script>
<script src="controllers/page1Ctrl.js"></script>
<script src="controllers/page2Ctrl.js"></script>
</head>
<body>
<header ng-controller="MenuToggleCtrl">
<button class="menuLeft" type="button" ng-model="clicked" ng-click="menuToggle()">☰</button>
<label id="pageTitle" class="pageTitle">Select item from list</label>
<button class="menuRight" type="button">⋮</button>
</header>
<section class="mainMenu" ng-controller="MainMenuCtrl" ng-if="!clicked">
<ul>
<li ng-repeat="item in menuItems">
<a href="#/{{item.name}}">
<image ng-src="images/{{item.image}}.png"></image>
{{item.name}}
</a>
</li>
</ul>
</section>
<main ng-view></main>
<footer ng-controller="MenuToggleCtrl" ng-if="clicked">
<ul class="horizontal-style">
<li><button type="button">NO</button></li>
<li><button type="button">EXTRA</button></li>
<!--<li><button type="button">EXTRA</button></li>-->
<!--<li><button type="button" ng-hide="true">EXTRA</button></li>-->
<li><button type="button">YES</button></li>
</ul>
</footer>
</body>
</html>
Скройте весь li, применив элемент ng-hide к элементу li.
<li ng-hide={{expression}}><button type="button">EXTRA</button></li>
ПРИМЕЧАНИЕ. Вы также можете использовать ng-if
вместо ng-hide
который полностью удалит <li>
из DOM и сможет доказать работоспособность с большим содержимым внутри контейнера.
Я проверил ваш код, это нормально. вы скрываете кнопку внизу
<button type="button">EXTRA</button>
Вам нужно скрыть полные значения ниже li
<li><button type="button">EXTRA</button></li>
Это прекрасно работает.
Когда вы скрываете кнопку в одиночку, все же ли вид виден, а некоторые стили, добавленные в li, создают некоторое расстояние между двумя кнопками.
Скройте весь li, применив элемент ng-hide к элементу li.
<li ng-hide="true"><button type="button">EXTRA</button></li>