TAB problem with the CSS style sheet

Question

TAB problem with the CSS style sheet

Navigation

#1 by (1 votes)

0

I have a problem with the HTML and the style sheet in a tabbed navigation.

When I move the mouse pointer over the tab, it does not work correctly, only at the ends of the tab; If I click in the middle of the tab, it does not do anything to change the tab.

There are 3 tabs that when you click on each one, change the tab and show a new view.

I tried:

Change property display: table-cell; to something else: it works but there are no tabs left next to each other which is what I want.
changing to float of the label a and with the property display: inline-block; but it continues with the same problem, only the first works well because in the first tab I can click on any side of the tab.

In 2 and 3 only at the ends of the tab, if I click in the middle of it, it does not do anything and the little hand of pointer does not appear.

This is my code:

.wn_services-tabs {
        .wn_fl;
        display: table;
        border-bottom: 0;
        border-collapse: collapse;
        a {
            display: table-cell;
            background: @services-tabs-background;
            line-height: 58px;
            color: black;
            text-transform: uppercase;
            .wn_font-medium();
            color: @services-tabs-color;
            font-size: 1.4em;
            text-decoration: none;
            border: 1px solid @services-outer-border;
            position: relative;
            width: 186px;
            text-align: center;
            border-bottom: 0;
            outline: 0;
            background-clip: padding-box;
            padding: 0;
            &:hover {
                background-color: white;
            }
            .wn_ico {
                display: inline-block;
                width: 14px;
                height: 14px;
                border-radius: 20px;
                vertical-align: middle;
                margin-right: 4px;
            }
            &.wn_active {
                background-color: white;
                z-index: 10;
                &:before {
                    content: "";
                    height: 3px;
                    width: 100%;
                    left: 0;
                    top: -3px;
                    background: @services-tabs-active-border;
                    position: absolute;
                }
            }   
        }

<div class="wn_services-tabs">
	<a href="#" ng-repeat="tab in statusCtrl.tabs" ng-class="{wn_active:statusCtrl.isActiveTab(tab.key)}" ng-click="statusCtrl.onClickTab($event, tab.key)">aaa</a>
</div>

html css

asked by Reynier Téllez 13.09.2016 в 22:46

source

1 answer

Make a filter in php / mysql Condition values of a select to show students that make up a project and students who are not subscribed to a project

score 1 · Answer 1

Your code is not likely because you use angular to generate the tabs. Anyway, I'll give you a simple example with Flexbox.

body {
  display: flex;
}
.tab {
  background-color: #fff;
  border: 1px solid #ccc;
  color: #444;
  cursor: pointer;
  font-size: 15px;
  text-decoration: none;
  padding: .5rem .8rem;
}
.tab:not(:first-of-type) {
  border-left: none;
}
.tab:hover {
  background-color: #f5f5f5;
}

<a href="" class="tab">Tab 1</a>
<a href="" class="tab">Tab 2</a>
<a href="" class="tab">Tab 3</a>