Получить иконку с подтекстом, а затем список в той же строке? - PullRequest
Новая
       26

Получить иконку с подтекстом, а затем список в той же строке?

0 голосов
/ 24 октября 2018

Я пытаюсь просто сделать значок с подтекстом, а затем пункты меню все в одной строке.Тем не менее, он продолжает размещать пункты меню на другой строке.То есть мой HTML выглядит следующим образом: Значок (с подтекстом)
** пробел Test1 Test2 и т. Д. * 

    .wrapper {
      display: inline-block;
      white-space: nowrap;
    }
    
    ul li {
      display: inline;
      white-space: nowrap;
    }
		<div>
				<div className="wrapper">
					<div className="logo">
			<a href="/"><img height="35" width="35" src={Logo} alt="TriLogo"/></a>
					</div>
					<div className="text">
						Triangular
					</div>
				</div>
				<ul>					
					<li><a href="/">Test1</a></li>
					<li><a href="/">Test2</a></li>
					<li><a href="/">Test3</a></li>
					<li><a href="/">Sit amet</a></li>				
				</ul>
			</div>

Ответы [ 2 ]

0 голосов
/ 24 октября 2018

Поскольку вы не отображаете дочерние элементы .wrapper (логотип и текст) встроенными.То же самое с ul.

Ниже изменения в CSS помогут вам это исправить. 

.wrapper, .wrapper{
  display: inline-block;
  white-space: nowrap;
}

ul, li {
  display: inline;
  white-space: nowrap;
}


.wrapper, .wrapper {
  display: inline-block;
  white-space: nowrap;
  vertical-align:top;
}

ul, li {
  display: inline;
  white-space: nowrap;
}
<div>
            <div class="wrapper">
                <div class="logo">
        <a href="/"><img height="35" width="35" src={Logo} alt="TriLogo"/></a>
                </div>
                <div class="text">
                    Triangular
                </div>
            </div>
            <ul>                    
                <li><a href="/">Test1</a></li>
                <li><a href="/">Test2</a></li>
                <li><a href="/">Test3</a></li>
                <li><a href="/">Sit amet</a></li>               
            </ul>
        </div>

Вы также можете проверить это здесь .

ОБНОВЛЕНИЕ 1:

У меня есть подтекст под логотипом.

Проверьте это здесь

0 голосов
/ 24 октября 2018

Вот что я сделал, чтобы заставить его работать, надеюсь, это то, что вам нужно.

Я сделал так, чтобы css выглядела так: 

 li,.wrapper {
     float: left;
     top: 0px;
     margin-left:20px;
 }

https://jsfiddle.net/xJoeTheHobox/6ds37v8m/47/

...