HTML-水平方向多个不正确的对齐

时间：2018-08-13 06:13:45

标签： html css

我想水平对齐网站徽标，网站名称和网站标题，但它们都放在不同的位置。enter image description here

我想要这样的东西：enter image description here

html和CSS在这里https://codepen.io/jonathan-lau/pen/jpJBMK

我有import numpy as np, pandas as pd df = pd.DataFrame({ 'A' : ['8:06:00','11:00:00','11:30:00','12:00:00','13:00:00','13:30:00','14:00:00','17:00:00'], 'B' : ['ABC','ABC','DEF','XYZ','ABC','LMN','DEF','ABC'], 'C' : [1,2,1,1,3,1,2,4], }) # convert individual values to sets to make the next steps easier valsets = df['B'].apply(lambda x: {x}) # define numpy ufuncs to get union of sets and size of intersection of sets # note that union_sets.accumulate() will give a "cumulative union" of sets union_sets = np.frompyfunc(lambda x, y: x | y, 2, 1) intersect_count = np.frompyfunc(lambda x, y: len(x & y), 2, 1) # create numpy vectors showing how many unique values have been seen up to # each point, and how many will be seen from there to the end seen = union_sets.accumulate(valsets, dtype=np.object) to_be_seen = union_sets.accumulate(valsets[::-1], dtype=np.object)[::-1] # count how many are in both the have-been-seen and to-be-seen sets df['res'] = intersect_count(seen, to_be_seen) # add intermediate vectors for illustration df['seen'] = seen df['to_be_seen'] = to_be_seen print(df) A B C res seen to_be_seen 0 8:06:00 ABC 1 1 {ABC} {XYZ, ABC, DEF, LMN} 1 11:00:00 ABC 2 1 {ABC} {XYZ, ABC, LMN, DEF} 2 11:30:00 DEF 1 2 {ABC, DEF} {XYZ, ABC, DEF, LMN} 3 12:00:00 XYZ 1 3 {XYZ, ABC, DEF} {XYZ, ABC, LMN, DEF} 4 13:00:00 ABC 3 2 {XYZ, ABC, DEF} {ABC, DEF, LMN} 5 13:30:00 LMN 1 3 {XYZ, ABC, LMN, DEF} {ABC, LMN, DEF} 6 14:00:00 DEF 2 2 {XYZ, ABC, DEF, LMN} {ABC, DEF} 7 17:00:00 ABC 4 1 {XYZ, ABC, LMN, DEF} {ABC} ，但仍然无法正确对齐。

除了徽标和站点名称未对齐之外，这是我的理想视图。

enter image description here

6 个答案:

答案 0 :(得分：3)

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
}
 .clearfix {
     display: inline-block;
}
/* start commented backslash hack \*/
 * html .clearfix {
     height: 1%;
}
 .clearfix {
     display: block;
}
/* close commented backslash hack */
 body{
     margin: 0;
     padding: 0;
     background: whitesmoke;
}
 .site-header{
     padding:10px 5%;
     display: flex;
     justify-content: center;
     position:relative;
}
 .main-logo{
     img {
         size: 5px;
    }
}
 .site-name{
     font-size: 20px;
     display: inline-block;
     padding: 21px 32px 0;
}
 .billboard{
     text-align:right;
     padding: 10px 5%;
     margin: 0;
     font-size: 20px;
}
 .box__input{
     text-align:right;
}
 .search-box{
     position: absolute;
     bottom: -10px;
     left: 50%;
     transform: translate(-50%,50%);
     background: #2F3640;
     height: 40px;
     border-radius: 40px;
     padding:10px;
}
 .search-box:hover .search-txt{
     width: 320px;
     padding: 0 6px;
}
 .search-box:hover .search-btn{
     background: white;
}
.search-box .wrapper {
    position:relative;
}
 .search-btn{
     color: #e84118;
     float: right;
     width: 40px;
     height: 40px;
     border-radius: 50%;
     background: #2F3640;
     display: flex;
     justify-content: center;
     align-items: center;
     transition: 0.4s;
     position:absolute;
     top: 0;
     right:0;
}
 .search-txt{
     border: none;
     background: none;
     outline: none;
     float: left;
     padding: 0;
     color: white;
     font-size: 15px;
     transition: 0.4s;
     line-height: 40px;
     width: 0px;
     min-width: 40px;
}
main {
    display: flex;
    justify-content: center;
}
main section {
  display: flex;
  flex-direction: column;
  margin-top: 40px;
}
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>DCS text analytics tool</title>
        <link rel="stylesheet" href="normalize.css">
        <link rel="stylesheet" href="sprint12.css">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
    </head>
    <body>
        <header class="site-header clearfix">
            <div class="main-logo">
                <a href="sprint12.html">
                    <img src="sample logo.jpg" alt="logo">            
                </a>
                <p class="site-name clearfix">DCS text analytics tool</p>        
           </div>
           <div class="search-box">
             <div class="wrapper">
               <input class="search-txt" type="text" name="">
               <a class="search-btn" href="#">
                 <i class="fas fa-search"></i>
               </a>
             </div>
            </div> 
        </header>
        <main>
            <section>
               <h1 class="billboard clearfix">
                   Choose a file or drag it here:
               </h1>
               <form class="box" method="post" action="" enctype="multipart/form-data">
                 <div class="box__input">
                    <input class="box__file" type="file" name="files[]" id="file" data-multiple-caption="{count} files selected" multiple />
                    <label for="file"><strong></strong> <span class="box__dragndrop"> </span></label>
                    <button class="box__button" type="submit">Upload</button>
                 </div>
            </form>
            </section>
            
        </main>
    </body>
</html>

https://jsfiddle.net/Sampath_Madhuranga/yqb6ez4L/24/

这对您有用。尝试让我知道是否有问题。

谢谢。

答案 1 :(得分：0)

我已将内容放在https://codepen.io/anon/pen/YjgZLZ

中

对于徽标，我使用test-align，对于其他margin: 0 auto使用固定宽度的徽标。

答案 2 :(得分：0)

您可以改用flexbox属性。请看一下我从您的那支笔上拨出的那支笔：https://codepen.io/muratdogan17/pen/RBdpQV 

.main-wrapper {
  align-items:center;
  display: flex;
  justify-content: space-between;
}

完整的CSS Flexbox指南：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Codepen html部分直接解析正文，这就是为什么您无需编写额外的meta或doctype员工，btw。

答案 3 :(得分：0)

尝试此代码

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
  .clearfix { display: inline-block; }
  /* start commented backslash hack \*/
  * html .clearfix { height: 1%; }
  .clearfix { display: block; }
  /* close commented backslash hack */

body{
    margin: 0;
    padding: 0;
    background: whitesmoke;
}

.site-header {
    padding: 10px 5%;
    display: block;
    text-align: center;
}
.main-logo{
    img{
        size: 5px;
    }
}
main {
    margin-top: 55px;
}
.site-name{
    font-size: 20px;
    display: inline-block;
    padding: 21px 32px 0;
           
}
.billboard{
    padding: 10px 5%;
    margin: 0;
    font-size: 20px;
}

.box__input{
    
    text-align:right;
}

.search-box{
    position: absolute;
    top: 25%;
    left: 50%; 
    transform: translate(-50%,50%);
    background: #2F3640;
    height: 40px;
    border-radius: 40px;
    padding:10px;
}

.search-box:hover > .search-txt{
    width: 320px;
    padding: 0 6px;
}

.search-box:hover > .search-btn{
    background: white;
}
.search-btn{
    color: #e84118;
    float: right;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #2F3640;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.4s;
}

.search-txt{
    border: none;
    background: none;
    outline: none;
    float: left;
    padding: 0;
    color: white;
    font-size: 15px;
    transition: 0.4s;
    line-height: 40px;
    width: 0px;
 }
form.box {
    display: flex;
    justify-content: center;
}
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>DCS text analytics tool</title>
        <link rel="stylesheet" href="normalize.css">
        <link rel="stylesheet" href="sprint12.css">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
    </head>
    <body>
        <header class="site-header clearfix">
            <div class="main-logo">
                <a href="sprint12.html">
                    <img src="sample logo.jpg" alt="logo">            
                </a>
            <p class="site-name clearfix">DCS text analytics tool</p>        
           </div>
          <main>
            <section>
               <h1 class="billboard clearfix">
                   Choose a file or drag it here:
               </h1>
            </section> <!-- This is a commen-->
            <form class="box" method="post" action="" enctype="multipart/form-data">
                 <div class="box__input">
                    <input class="box__file" type="file" name="files[]" id="file" data-multiple-caption="{count} files selected" multiple />
                    <label for="file"><strong></strong> <span class="box__dragndrop"> </span></label>
                    <button class="box__button" type="submit">Upload</button>
                 </div>
            </form>
            
            <div class="search-box">
                        <input class="search-txt" type="text" name="">
                        <a class="search-btn" href="#">
                        <i class="fas fa-search"></i>
                        </a>
            </div> 
        </main>
        </header>
    </body>
</html>

答案 4 :(得分：0)

请在左侧添加float：left;宽度：自动;右侧部分float：right;宽度：自动;

答案 5 :(得分：0)

此解决方案可修复台式计算机上的对齐方式。我还对语义进行了一些更正，将h1用于输入字段，将p用于页面标题等。

body {
  margin: 0;
  padding: 0;
  background: whitesmoke;
}

/*Header*/
.site-header {
  padding: 10px 5%;
  display: flex;
  justify-content: space-between;
}

.main-logo img {
    size: 5px;
}

.site-name {
  font-size: 20px;
  display: inline-block;
  padding: 0 32px;
  margin: 0;
}

.billboard {
  margin: 0;
  font-size: 20px;
  padding-right: 5px;
}

.box__input {
  text-align: right;
}

/*Main*/
.main-wrapper {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.search-box {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, 50%);
  background: #2F3640;
  height: 40px;
  border-radius: 40px;
  padding: 10px;
}

.search-txt {
  border: none;
  background: none;
  outline: none;
  float: left;
  padding: 0;
  color: white;
  font-size: 15px;
  transition: 0.4s;
  line-height: 40px;
  width: 0px;
}

.search-btn {
  color: #e84118;
  float: right;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #2F3640;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.4s;
}

.search-box:hover>.search-txt {
  width: 320px;
  padding: 0 6px;
}

.search-box:hover>.search-btn {
  background: white;
}
<head>
  <meta charset="utf-8">
  <title>DCS text analytics tool</title>
  <link rel="stylesheet" href="normalize.css">
  <link rel="stylesheet" href="sprint12.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
</head>

<body>
  <header class="site-header">
    
    <div class="main-logo">
      <a href="sprint12.html">
        <img src="sample/logo.jpg" alt="logo">
      </a>
      <h1 class="site-name">DCS text analytics tool</h1>
    </div>
    
    <section >
      <p class="billboard">
        Choose a file or drag it here:
      </p>

      <form class="box" method="post" action="" enctype="multipart/form-data" style="float: right;">
        <div class="box__input">
          <input class="box__file" type="file" name="files[]" id="file" data-multiple-caption="{count} files selected" multiple="">
          <label for="file"> <span class="box__dragndrop"> </span></label>
          <button class="box__button" type="submit">Upload</button>
        </div>
      </form>
    </section>
    
  </header>


  <main class="main-wrapper">
    <div class="search-box">
      <input class="search-txt" type="text" name="">
      <a class="search-btn" href="#">
        <i class="fas fa-search"></i>
      </a>
    </div>
  </main>
</body>

相关问题
最新问题