Question

嘿伙计们，所以我只是尝试仅围绕内容调整片段大小，而不是让它填满页面的整个宽度。我尝试了一切，我只是不能得到它。我如何调整细分市场？我需要将它放入另一个div吗？或者是否有一些简单的语义修复？

＆＃13;

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css">    



<div class="ui segment">
   
    <div class="ui middle aligned grid child">

  <div class="column">
    <div class="ui center aligned page grid">

      <div class="eight wide  column">

        <div class="ui two column middle aligned very relaxed stackable grid">
          <div class="ui vertical divider">
            Or
          </div>

          <div class="column">
            <div class="ui form">

              <div class="field">
                <label>Username</label>
                <div class="ui left icon input">
                  <input type="text" placeholder="Username">
                  <i class="user icon"></i>
                </div>
              </div>
              <div class="field">
                <label>Password</label>
                <div class="ui left icon input">
                  <input type="password">
                  <i class="lock icon"></i>
                </div>
              </div>

              <div class="ui blue submit button">Login</div>
            </div>
          </div>

          <div class="center aligned column">
            
            <div class="ui big green labeled icon button">
              <i class="signup icon"></i> Sign Up
            </div>

          </div>
        </div>



      </div>
    </div>
  </div>
</div>
</div>

＆＃13;

Answer 1

将compact课程添加到您的kitchen sink。

中

<div class="ui compact segment">
...
</div>

Answer 2

在您的细分中应用display: inline-block会使其占用尽可能多的空间。

在你的例子中，这导致元素将自己压缩成不必要的窄尺寸。尝试将min-width属性应用于segment本身或您认为重要的其他元素。

语义UI段大小调整问题

2 个答案: