勝手に改行される

少し質問内容の方を変えさせていただきます。

ATOMエディタのatom-html-previewのパッケージで、製作中のwebsiteのプレビュー画面を確認しながら作業しているのですが、実際にサーバーからwebsiteとして反映されるものと、ATOMエディタのpreview画面で表示されるものが異なります。(下の画像のナビを見ていただくとお分かりいただけると思います。)

画像の中で下に表示されているものがchromeで確認したものなのですが、search(カスタム検索)の部分が改行されてしまっています。改行しないように、whitespace:no-wrap; display:block;からdisplay:inline-block;に変更しましたが、改善できませんでした。

どのようにすれば、改行させることなく、表示させることが可能でしょうか？

この問題がお分かりになる方、大変恐縮ですが、ご回答いただけると幸いです。

念の為に、websiteのURLを記載させていただきます。よろしくお願いします。
URL

HTML


  <div class= "header-dash">
    <div class="nav2">
      <li class="part logo"><a href="#"><img src="box img/header/logo.gif" alt=""></a>
        <ul>
          <li><a href="#">b1</a></li>
          <li><a href="#">b1</a></li>
        </ul>
      </li>

      <li class="part">
        <a href="#">
          <p class="text1">
            <span class="date">what's new</span><br />
            <span class="title">新作商品から探す</span>
          </p>
          </a>
        <ul>
          <li><a href="#">c1</a></li>
        </ul>
      </li>

      <li class="part">
        <a href="#">
          <p>
            <span class="date">design</span><br />
            <span class="title">デザインの特徴から探す</span>
          </p>
          </a>
        <ul>
          <li><a href="#">c1</a></li>
        </ul>
      </li>

      <li class="part">
        <a href="#">
          <p>
            <span class="date">brands</span><br />
            <span class="title">ブランドから探す</span>
          </p>
          </a>
        <ul>
          <li><a href="#">c1</a></li>
        </ul>
      </li>
      <li class="part">
        <a href="#">
          <p>
            <span class="date">search</span><br />
            <span class="title">カスタム検索</span>
          </p>
          </a>
        <ul>
          <li><a href="#">c1</a></li>
        </ul>
      </li>
    </div>
    <div class="socialBox">
      <ul>
        <li><a href=""><img src="box img/box social/facebook.gif" width="32" height="32" alt="LINE"></a></li>
        <li><a href=""><img src="box img/box social/Instagram.gif" width="32" height="32" alt="Instagram"></a></li>
        <li><a href=""><img src="box img/box social/line.gif" width="32" height="32" alt="Facebook"></a></li>
        <li><a href=""><img src="box img/box social/twitter.gif" width="32" height="32" alt="Twitter"></a></li>
      </ul>
      <div class="searchBox">
        <input type="text" name="" placeholder="ここに文章を入れます"/>
      </div>
    </div>
  </div>
コード

CSS


.header-dash ul li{
  display: inline-block;
}

.header-dash .nav2 .part{
  display: inline-block;
}

.part{
  display:inline-block;
  clear:both;
  width:100%;
}

.nav2 {
 	width: 750px;
 	height: 150px;
  display:inline-block;
 }
 .nav2 li {
 	position: relative;
 	width: 140px;
 	height: 100px;
 	text-align: center;
 	border-right: 1px solid #fff;
  clear:both;
 }
 .nav2 .logo{
   width:170px;

 }

 .nav2 li:last-child {
 	border-right: none;
 }
 .nav2 li a {
 	display: inline-block;
  width:100%;
 	height: 100px;
 	color: #fff;
 	font-size: 14px;
 	line-height: 2.8;
 	transition: 0.5s;
  background: #7FFFD4;
  z-index:100;
 }
 .nav2 li a:hover {
 	color:#fff;
  background: #7FFFD4;
 }
 .nav2 > li li:hover > a {
   background: #7FFFD4;
 }
 .nav2 li ul {
 	left:0;
 	position:absolute;
  z-index:1000;
  padding-left:0;
 }
 .nav2 li ul li {
 	overflow: hidden;
 	height:0;
 	transition:0.2s;
 }
 .nav2 li ul li a {
 	border-top:1px solid #fff;
 }
 .nav2 li:hover > ul > li {
 	overflow: visible;
 	width:120px;
 	height:100px;
 }



コード

行動規範の内容に同意します

回答1件

ベストアンサー

.nav2 を div要素でなくul要素にして、下記追加。

CSS
1.nav2 {
2    font-size: 0; /* add */
3}
4```**動くサンプル：**[https://jsfiddle.net/1pw535zr/](https://jsfiddle.net/1pw535zr/)
5
6---
7
8`display:inline-block;` は要素間にスペースが入ります。（たしかソースに改行がある場合）そのため `font-size: 0;` でサイズを消して内包要素に `font-size` を指定する（今回はされているので良い）ことで並びます。