Элемент меняет ширину (?) После наведения - PullRequest
Новая
       7

Элемент меняет ширину (?) После наведения

0 голосов
/ 30 апреля 2018

Итак, я делаю меню для веб-сайта, когда веб-сайт загружается, меню выглядит как img # 1, значки на боковой панели складываются, чего я не хочу. img1 После того, как вы наведите курсор мыши на значки, они правильно складываются img # 2. после зависания Вот как я на самом деле этого хочу. Я уверен, что это просто что-то маленькое, но я не могу понять это? 

nav {
    height: 40px;
    background-color: var(--main-bg-color);
    width: 100%;
    margin: 2% 0;
}

.menu-icon {
    display: none;
}
.main-nav {
    margin-right:auto;
    padding-left:4%;
    width:fit-content;
}
nav li {
    display: inline;
    padding-right:5%;
}

nav a {
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-decoration: none;
    color: var(--light-color);
    font-family: var(--font-h);
}
.icon-nav{
    margin-left:auto;
    padding-right:4%;
}
.icon-nav a{
    padding: 0 5%;
}

HTML 

<nav>
    <div class="menu-icon">
        <i class="fa fa-bars" aria-hidden="true"></i>
    </div>
        <div class="main-nav">
            <ul>
                <li>
                    <a href="/">Home</a>
                </li>
                <li>
                    <a href="/#about-me">About me</a>
                </li>

                <li>
                    <a href="/#skills">Skills</a>
                </li>
                <li>
                    <a href="/#portfolio">Portfolio</a>
                </li>
                <li>
                    <a href="/#contact-wrapper">Contact</a>
                </li>
            </ul>
        </div>
        <div class="icon-nav">
            <a href="" target="_blank">
                <i class="fa fa-github" aria-hidden="true"></i>
            </a>
            <a href="" target="_blank">
                <i class="fa fa-twitter" aria-hidden="true"></i>
            </a>
            <a href="" target="_blank">
                <i class="fa fa-linkedin" aria-hidden="true"></i>
            </a>
        </div>
</nav>

1 Ответ

0 голосов
/ 11 мая 2018

Вероятно, ваша проблема связана с проблемой в макете .icon-nav и его заполнении.
problem
Это можно исправить несколькими способами:

Добавление :not(:last-child) в CSS-селектор .icon-nav a делает его: 

.icon-nav a:not(:last-child) {
    padding: 0 5%;
}

OR

Добавление:

  • Сначала добавим width: 15%; к .icon-nav.
  • Второй, сдинг width: 75%; до .main-nav.
  • и добавление 
    .icon-nav::before {<br>    content: "";<br>    width: 15%;<br>    display: inline-block;<br>}

/******* EXTRA *******/
#screen{
	resize:horizontal;
	overflow:hidden;
  background-image: url('data:image/svg+xml;utf8, <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" version="1.1" ><rect x="0" y="0" width="10" height="10" fill="lightgrey"/><rect x="10" y="10" width="10" height="10" fill="lightgrey"/></svg>');
}
/*********************/
/********** Things forgotten **********/
html {
  --main-bg-color: black;
  --light-color: red;
  --font-h: /*monospace*/
  ;
}
ul {
  display: inline;
  list-style-type: none;
}
#screen div {
  display: inline-block;
  height: 1em;
}
#screen div * {
  border-width: 0;
}
/**************************************/

nav {
  height: 40px;
  background-color: var(--main-bg-color);
  width: 100%;
  margin: 2% 0;
}

.menu-icon {
  display: none;
}
.main-nav {
  margin-right: auto;
  padding-left: 4%;
  width: fit-content;
  /* ADDED { */  width: 70%;  /* } */
}
nav li {
  display: inline;
  padding-right: 5%;
}
nav a {
  text-transform: uppercase;
  letter-spacing: 1.5px;
  text-decoration: none;
  color: var(--light-color);
  font-family: var(--font-h);
}
/*= ADDED =======================*/
    .icon-nav::before {
      content: "";
      width: 15%;
      display: inline-block;
    }
/*===============================*/
.icon-nav {
  margin-left: auto;
  padding-right: 4%;
  /* ADDED {*/  width: 15%;  /* } */
}
.icon-nav a {
  padding: 0 5%;
}
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>
<body>
  <div id="screen">
    <nav>
      <div class="menu-icon">
        <i class="fa fa-bars" aria-hidden="true"></i>
      </div>
      <div class="main-nav">
        <ul>
          <li>
            <a href="/">Home</a>
          </li>
          <li>
            <a href="/#about-me">About me</a>
          </li>
          <li>
            <a href="/#skills">Skills</a>
          </li>
          <li>
            <a href="/#portfolio">Portfolio</a>
          </li>
          <li>
            <a href="/#contact-wrapper">Contact</a>
          </li>
        </ul>
      </div>
      <div class="icon-nav">
        <a href="" target="_blank">
          <i class="fa" aria-hidden="true">&#61595;</i>
        </a>
        <a href="" target="_blank">
          <i class="fa" aria-hidden="true">&#61593;</i>
        </a>
        <a href="" target="_blank">
          <i class="fa" aria-hidden="true">&#61665;</i>
        </a>
      </div>
    </nav>
  </div>
</body>
</html>
...