Question

我有这个html文件正在使用语义UI，最终产品应该看起来像pic中的那个。但是它不能很好地渲染并且图像一直被推到屏幕的最左侧因此，元素也不正确地对齐。我哪里出错了？这是当前的代码。

html代码

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8"/>
<meta http-equiv= "X-UA-Compatible" content ="IE=edge,chrome=1"/>
<meta name = "viewport" content = "width=device-width, initial-scale=1.0,maximum-scale =1.0"/>
<title>SEMANTIC UI</title>
<!--Site properties-->
<!--CSS-->
<link rel = "stylesheet" type ="text/css" href ="dist/semantic.min.css">
<link rel = "stylesheet" type ="text/css" href ="dist/mycss.css">
<script type ="text/javascript" src = "dist/jquery.js"></script>

<!--Javascript-->
<script type ="text/javascript" src = "dist/semantic.min.js"></script>
<script type ="text/javascript" src = "dist/myjs.js"></script>


</head>

<body>


<!--sidebar-->
<div class = "ui sidebar menu large compact container icon labeled vertical thin">
    <a class ="item" href ="#"><i class="global icon">Cities</i></a>
    <a class ="item" href ="#"><i class="car icon">find a ride</i></a>
    <div class = "ui buttons">
        <button class = "ui button black">
            <i class = "sign in icon"></i>Login
        </button>
        <div class = "or"></div>
        <button class = "ui button green">
            <i class = "users icon">Sign Up</a>
        </button>

    </div>
</div>

<!--Main content-->
<div class = "pusher">
    <div class = "ui vertical aligned center segment landing inverted">

        <div class = "transbg">
            <div class = "ui container">
                <div class = "ui secondary inverted top large pointing menu">
                    <div class = "left item">
                        <a class "toc item">
                            <i class ="sidebar icon"></i>
                        </a>
                    </div>
                    <div class = "right-item">
                        <a class = "active item" href = "/">Home</a>
                        <a class ="item" href ="#">Cities</a>
                        <a class = "item" href="#"><i class = "car icon">Find a Ride</i></a>
                        <div class = "item">
                            <div class = "ui buttons">
                                <button class = "ui button black">
                                    <i class = "sign in icon"></i>Login
                                </button>
                                <div class = "or"><div>
                                <button class = "ui button green"><i class ="users icon"><i class = "users icon">Sign Up
                                </button>


                            </div>

                        </div>


                </div>
            </div>
        </div>
        <div class = "ui text container">
            <h1 class = "ui header centered inverted">Look up for a ride near you</h1>
            <div class = "container fluid findbg">
                <form class ="ui form">
                    <div class = "field">
                        <div class = "fields">
                            <div class = "eleven wide field">
                                <div class = "ui search location">
                                    <div class = "ui left icon input">
                                        <i class = "inverted circular blue map icon"></i>
                                        <input class = "prompt"type = "text" name = "location" placeholder = "enter your location...">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>

        </div>

    </div>
</div> 



</body>

</html>

CSS代码文件

.landing{
   background:url("bg.jpg") #103d50 70% 30% no-repeat !important;

 }
.landing.segment{
    min-height: 500px;
   padding:0em 0em;

 }
.transbg{
  min-height: 500px;
  background:rgba(32,154,189,0.655);

 }
.menu{
  border:0px!important;
}
.landing h1.ui.header{
  margin-top: 4.2em;
  margin-bottom: 0.11em;
  font-weight: 100;

 }
 .findbg{
   padding: 1em 1.5em;
   width:100%;
   background:rgba(255,255,155,0.7);
  }

Answer 1

我不得不说你的标记中有一些错误：

不匹配的结束标记（＆lt; i＆gt;与＆lt; / a＆gt;配对）

滥用语义UI图标标记。你不应该在＆lt; i class =＆＃34;＆lt; icon name＆gt;里面放任何文字。图标＆＃34;＆GT;＆LT; I＆GT /;就是这样   由Semantic UI翻译为类属性中指定的图标。

（由@Anirudh指出）标签不正确（即＆lt; div class =＆＃34;或＆＃34;＆gt;＆lt; div＆gt;）

请查看以下代码以供参考。不确定我是否达到了您想要的外观，但它修复了现有标记中已损坏的显示。

＆＃13;

.landing{
   background:url("bg.jpg") #103d50 70% 30% no-repeat !important;

 }
.landing.segment{
    min-height: 500px;
   padding:0em 0em;

 }
.transbg{
  min-height: 500px;
  background:rgba(32,154,189,0.655);

 }
.menu{
  border:0px!important;
}
.landing h1.ui.header{
  margin-top: 4.2em;
  margin-bottom: 0.11em;
  font-weight: 100;

 }
 .findbg{
   padding: 1em 1.5em;
   width:100%;
   background:rgba(255,255,155,0.7);
  }

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
<!--sidebar-->
<div class = "ui sidebar menu large compact container icon labeled vertical thin">
    <a class ="item" href ="#"><i class="global icon"></i>Cities</a>
    <a class ="item" href ="#"><i class="car icon"></i>find a ride</a>
    <div class="item">
      <div class = "ui buttons">
          <a class = "ui button black">
              <i class = "sign in icon"></i>Login
          </a>
          <div class="or"></div>
          <a class = "ui button green">
              <i class = "users icon">Sign Up</i>
          </a>
      </div>
    </div>
</div>

<!--Main content-->
<div class = "pusher">
    <div class = "ui vertical aligned center segment landing inverted">
        <div class = "transbg">
            <div class = "ui container">
                <div class = "ui fluid secondary inverted top large pointing menu">
                    <a class = "toc item">
                            <i class ="sidebar icon"></i>
                    </a>
                    <div class = "right menu">
                        <a class = "active item" href = "/">Home</a>
                        <a class ="item" href ="#">Cities</a>
                        <a class = "item" href="#"><i class = "car icon"></i>Find a Ride</a>
                        <div class = "item">
                            <div class = "ui buttons">
                                <a class = "ui button black">
                                    <i class = "sign in icon"></i>Login
                                </a>
                                <div class = "or"></div>
                                <a class = "ui button green"><i class = "users icon"></i>Sign Up</a>
                            </div>
                       </div> <!-- item -->
                   </div><!-- right menu-->
              </div><!-- pointing menu -->
        </div>
        <div class = "ui text container">
            <h1 class = "ui header centered inverted">Look up for a ride near you</h1>
            <div class = "container findbg">
                <form class ="ui form">
                        <div class = "fields">
                            <div class = "sixteen wide field">
                                <div class = "ui search location">
                                    <div class = "ui left icon fluid input">
                                        <i class = "inverted circular blue map icon"></i>
                                        <input class = "prompt"type = "text" name = "location" placeholder = "enter your location...">
                                    </div>
                                </div>
                            </div>
                        </div>
                </form>
            </div>
        </div>
    </div>
</div>

＆＃13;

Html fie看起来不像最终产品

1 个答案: