Question

我正在使用语义ui并且卡在菜单栏中的Notification菜单实现中。

我可以使用列表设置弹出窗口，但我得到的是垂直挤压的小列表项，我需要它们水平放松。

以下是我正在使用的html。

<div class="ui fixed stackable menu">
  <a class="item" href="index.php"> <img src="logo.png" class="image"></a>
  <a class="item">My Project</a>
  <div class="right menu">

   <div class="item">
     <i class="bell outline icon"></i>
     <div class="ui teal circular mini label">4</div>
     <div class="ui wide notification popup bottom transition ">
     <div class="ui link celled selection list">
       <div class='item'>
        <div class='content'>
          <a class='header'>Millan kumar</a>
          <span class='time'>2 hrs ago</span>          
          <div class='description'>Commented on <a><b>Your Post </b></a> with <a><b>Following content</b></a></div>
          <div class='extra'>Thanks you for your support</div>
        </div>
      </div>
    </div>

  </div>
</div>

<a class="item" href="profile.php">Profile</a>
<a class="item" href="logout.php">Logout</a>
</div>
</div>

使用Javascript：

 $('.teal.label')
      .popup({
        on: 'click'
      });

JS小提琴： https://jsfiddle.net/jfk4wkb1/2/

我已经尝试过将这些东西放在JS Fiddle上，但是在那里弹出窗口甚至没有出现，但是在我的本地环境中弹出窗口是可以的，但它是垂直挤压的。

Answer 1

像这样：Fiddle link

你没有在你的小提琴外部资源中添加jquery。另外我添加一些填充和宽度看起来不错。

<div class="ui link celled selection list"  style ="padding: 20px;width: 300px;">

HTML：

 <div class="ui fixed stackable menu">
      <a class="item" href="index.php"> <img src="logo.png" class="image"></a>
      <a class="item">My Project</a>
      <div class="right menu">

       <div class="item">
         <i class="bell outline icon"></i>
         <div class="ui teal circular mini label">4</div>
         <div class="ui wide notification popup bottom right transition ">
        <div class="ui link celled selection list"  style ="padding: 20px;width: 300px;">
           <div class='item'>
            <div class='content'>
              <a class='header'>Millan kumar</a>
              <span class='time'>2 hrs ago</span>          
              <div class='description'>Commented on <a><b>Your Post </b></a> with <a><b>Following content</b></a></div>
              <div class='extra'>Thanks you for your support</div>
            </div>
          </div>
        </div>

      </div>
    </div>

JS：

 $('.teal.label')
      .popup({
        on: 'click'
      });

语义弹出列表宽度太小

1 个答案: