css - 文本框填充到宽度，右对齐按钮等

-3

在某些方面，我仍然很新的CSS，并不“得到”如何做事（似乎令人费解，似乎并没有找出问题的简单方法） - 所以我希望这里有人能帮助我。我会发布相关的代码。我是一名程序员 - 但似乎无法弄清楚如何去做我想做的事。（顺便说一句 - 有没有什么好的工具可以'直观地'编辑CSS？我纯粹是通过代码来完成的）。css - 文本框填充到宽度，右对齐按钮等

a）我需要一个HTML文本框来扩展/收缩，因为浏览器窗口展开/收缩，并在其右侧有一个“搜索”图标图标。 b）我需要一些注册/登录按钮右对齐 c）我需要徽标/文本左对齐。

所以基本上流程是：

[＃1标识] [＃2菜单项目] [＃3与图标搜索栏] [＃4登录/注册按钮]

而且，如果浏览器窗口扩大，然后＃3扩大填补空间。即

小型台式

[＃1] [＃2] [＃3] [＃4]

大桌面

[＃1 ] [＃2] [<＃3 -------------------------->] [＃4]

idea LLY，我也想弄清楚移动（小的桌面）上如何使它：

[＃1] [＃4]

[＃3 ---->]

这是HTML我有（与其他的东西去掉，使其简单）

/* General CSS */ 
 
* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    padding-top: 150px; 
 
    padding-bottom: 30px; 
 
    font-family: 'Open Sans', sans-serif; 
 
    font-size: 18px; 
 
    line-height: 1.42857143; 
 
    margin: 0; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
} 
 

 
.clfix { 
 
    display: table; 
 
    content: " "; 
 
    clear: both; 
 
} 
 

 
.hide { 
 
    display: none; 
 
} 
 

 
/* Top bar */ 
 
.logo-separator { 
 
    float: left; 
 
    width: 1px; 
 
    border-right: 1px dashed #fff; 
 
    height: 80px; 
 
    padding-left:20px; 
 
} 
 

 
.navbar { 
 
    background-color: #124780; 
 
    position: fixed; 
 
    top: 0; 
 
    right: 0; 
 
    left: 0; 
 
    z-index: 1030; 
 
} 
 

 
.navbar .navbar-brand { 
 
    text-decoration: none; 
 
    float: left; 
 
    height: 85px; 
 
    padding: 15px 15px; 
 
    font-size: 18px; 
 
    line-height: 20px; 
 
} 
 

 
.navbar .navbar-header { 
 
    position: relative; 
 
} 
 

 
.navbar ul li a, .navbar .navbar-brand { 
 
    position: relative; 
 
    display: block; 
 
    padding: 15px; 
 
    line-height: 20px; 
 
    color: #fff; 
 
    text-decoration: none; 
 
} 
 

 
.nav.navbar-nav { 
 
    float: left; 
 
    margin: 50; 
 
    padding-left:20px; 
 
    color: #fff; 
 
} 
 

 
.navbar-nav > .separator { 
 
    padding: 15px 2px; 
 
    line-height: 20px; 
 
} 
 

 
.navbar-nav .dropdown .dropdown-menu > ul > li.separator { 
 
    padding: 5px 10px; 
 
    color: #000; 
 
} 
 

 
.navbar-nav .dropdown .dropdown-menu { 
 
    text-align:center; 
 
    display: none; 
 
    position: absolute; 
 
    background: #fff; 
 
    border-bottom: 1px solid #124780; 
 
    z-index: 999; 
 
} 
 

 
.navbar-nav .dropdown .dropdown-menu > li:hover > a { 
 
    background-color: #8fb4de; 
 
} 
 

 
.navbar-nav > li { 
 
    float: left; 
 
} 
 
/* 
 
.nav.navbar-nav li > a:hover, .nav.navbar-nav > li.open a { 
 
    color: #000; 
 
}*/ 
 

 
.top-buttons { 
 
    margin: 0; 
 
    padding: 0; 
 
    float:right; 
 
} 
 

 
.searchBar { 
 
    margin: 0; 
 
    padding: 0; 
 
    float:right; 
 
    border-style:solid;border-width:2px;border-color:#FF0000; 
 
    display:inline-flex; 
 
    background-color: #124780; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    left: 0; 
 

 
} 
 

 
.navbar-nav-button { 
 
    display: inline-block; 
 
    float:right; 
 
    padding-top:18px; 
 
    padding-right: 5px; 
 
    padding-left: 5px; 
 
} 
 

 
.top-buttons .btn.btn-sm { 
 
    padding: 5px 10px; 
 
    font-size: 12px; 
 
    line-height: 1.5; 
 
    border-radius: 7px; 
 
    display: inline-block; 
 
    margin-bottom: 0; 
 
    font-weight: 400; 
 
    text-align: center; 
 
    white-space: nowrap; 
 
    vertical-align: middle; 
 
    -ms-touch-action: manipulation; 
 
    touch-action: manipulation; 
 
    cursor: pointer; 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
    background-image: none; 
 
    border: 1px solid transparent; 
 
    width: 88px; 
 
    text-align: center; 
 
} 
 

 
.top-buttons .btn.btn-primary { 
 
    color: #fff; 
 
    background-color: #337ab7; 
 
    border-color: #2e6da4; 
 
    font-weight:bold; 
 
} 
 

 
.top-buttons .btn.btn-default { 
 
    color: #333; 
 
    background-color: #fff; 
 
    border-color: #ccc; 
 
    font-weight:bold; 
 
} 
 

 
.icon-bar { 
 
    background-color: #fff; 
 
} 
 

 
.navbar-nav2 { 
 
    display: inline-flex; 
 
    width: 100%; 
 
    padding-bottom: 5px; 
 
    padding-top: 0px; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 85px; 
 
    background: #fff; 
 
    height: 35px; 
 
    overflow: hidden; 
 
} 
 

 
.navbar-line { 
 
    position: absolute; 
 
    bottom:0px; 
 
    width: 100%; 
 
    height: 1px; 
 
    background-color: #000; 
 
    left: 0; 
 
} 
 

 
/* Content */ 
 
.container { 
 
    padding-right: 15px; 
 
    padding-left: 15px; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
} 
 

 
.row { 
 
    margin-right: -15px; 
 
    margin-left: -15px; 
 
} 
 

 
.col-50 { 
 
    float: left; 
 
    width: 50%; 
 
    position: relative; 
 
    min-height: 1px; 
 
    padding-right: 15px; 
 
    padding-left: 15px; 
 
} 
 

 
/* Panels */ 
 
.submenu { 
 
    xborder: 1px solid #ebf2f2; 
 
    border-radius: 5px; 
 
    margin-bottom: 20px; 
 
    background-color: #fff; 
 
} 
 

 
.submenu .panel-heading { 
 
    background-color: #24a3d1; 
 
    border: 11px solid #ebf2f2; 
 
    cursor: pointer; 
 
    text-align: center; 
 
    border-radius: 25px; 
 
    padding: 20px 15px; 
 
} 
 

 
.submenu .panel-heading.expanded { 
 
    border: 11px solid #ebf2f2; 
 
    border-bottom-left-radius: 0; 
 
    border-bottom-right-radius: 0; 
 
} 
 

 
.submenu .panel-heading .fa-plus, .submenu .panel-heading.expanded .fa-minus { 
 
    display: block; 
 
} 
 

 
.submenu .panel-heading.expanded .fa-plus, .submenu .panel-heading .fa-minus { 
 
    display: none; 
 
} 
 

 
.submenu .panel-heading:hover { 
 
    background-color: #166988; 
 
} 
 

 
.submenu .panel-heading .panel-title { 
 
    display: inline-block; 
 
    margin: 0; 
 
    font-size: 20px; 
 
    color: #fff; 
 
} 
 

 
.submenu .panel-heading i.fa { 
 
    font-size: 25px; 
 
    color: #fff; 
 
} 
 

 
.submenu .panel-heading i:first-child { 
 
    float: left; 
 
} 
 

 
.submenu .panel-heading i.fa-plus, .submenu .panel-heading i.fa-minus { 
 
    float: right; 
 
} 
 

 
.submenu .panel-body { 
 
    padding: 0; 
 
    overflow: hidden; 
 
} 
 

 
.submenu .panel-body.closed { 
 
    display: none; 
 
} 
 

 
.submenu .panel-body ul { 
 
    border: 1px solid #ebf2f2; 
 
    border-bottom: 12px solid #ebf2f2; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.submenu .panel-body ul li a { 
 
    display: block; 
 
    padding: 12px 8px; 
 
    color: #000; 
 
/* border-left: 1px solid #24a3d1; 
 
    border-right: 11px solid #ebf2f2; */ 
 
    border-left: 11px solid #ebf2f2; 
 
    border-right: 11px solid #ebf2f2; 
 

 
    border-bottom: 1px solid #ebf2f2; 
 
    text-decoration: none; 
 
    font-size: 16px; 
 
} 
 

 
.submenu .panel-body ul li a i { 
 
    font-size: 12px; 
 
    color: #24a3d1; 
 
} 
 

 
.submenu .panel-body ul li a:hover, .submenu .panel-body ul li a:hover i { 
 
    color: #fff; 
 
    background-color: #24a3d1; 
 
    text-decoration: none; 
 
} 
 

 
/* Modals */ 
 
.modal { 
 
    position: fixed; 
 
    left: 0; 
 
    top: 0; 
 
    z-index: 2000; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.modal-overlay { 
 
    position: relative; 
 
    left: 0; 
 
    top: 0; 
 
    background-color: #000; 
 
    opacity: .7; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.modal-content { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    padding-top: 60px; 
 
    padding-bottom: 60px; 
 
    padding-left: 20px; 
 
    padding-right: 20px; 
 
} 
 

 
.modal-body { 
 
    width: 100%; 
 
    background-color: #fff; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    border-radius: 10px; 
 
    z-index:1000; 
 
    position:relative; 
 
} 
 

 
.modal-body .modal-row { 
 
    width: 100%; 
 
} 
 

 
.modal-body .close { 
 
    background: transparent; 
 
    border: 0; 
 
    float: right; 
 
    font-size: 20px; 
 
    color: #aeaeae; 
 
    cursor:pointer; 
 
} 
 

 
.modal-body .button-container { 
 
    width: 100%; 
 
    height: 30px; 
 
    padding: 5px 10px; 
 
} 
 

 
.modal .modal-title { 
 
    font-weight: 700; 
 
    text-align: center; 
 
} 
 

 
.modal .modal-subtitle { 
 
    text-align: center; 
 
    padding-top: 8px; 
 
    padding-bottom: 8px; 
 
} 
 

 
.modal-body .fields { 
 
    padding-top: 20px; 
 
    position: relative; 
 
} 
 

 
.modal-body .input-container { 
 
    display: block; 
 
    padding: 10px 30px; 
 
    font-size: 13px; 
 
} 
 

 
.modal-body .input { 
 
    display: block; 
 
    width: 100%; 
 
    height: 30px; 
 
    padding: 5px 10px; 
 
    font-size: 12px; 
 
    line-height: 1.5; 
 
    color: #555; 
 
    background-color: #fff; 
 
    background-image: none; 
 
    border: 1px solid #ccc; 
 
    border-radius: 3px; 
 
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); 
 
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075); 
 
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; 
 
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; 
 
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; 
 
}  
 

 
.modal-body .button { 
 
    padding: 8px 12px; 
 
    font-size: 12px; 
 
    line-height: 1.5; 
 
    border-radius: 3px; 
 
    display: inline-block; 
 
    margin-bottom: 0; 
 
    font-weight: 400; 
 
    text-align: center; 
 
    white-space: nowrap; 
 
    vertical-align: middle; 
 
    -ms-touch-action: manipulation; 
 
    touch-action: manipulation; 
 
    cursor: pointer; 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
    background-image: none; 
 
    border: 1px solid transparent; 
 
    width: 100%; 
 
} 
 

 
.modal-body a.forgot { 
 
    float: right; 
 
} 
 

 
.modal-body .button.btn-primary { 
 
    color: #fff; 
 
    background-color: #337ab7; 
 
    border-color: #2e6da4; 
 
} 
 

 
.modal-body .button.facebook { 
 
    background-color: #3b5998; 
 
    color: #fff 
 
} 
 

 
.modal-body .button.google-plus { 
 
    background-color: #d9534f; 
 
    color: #fff 
 
} 
 

 
.modal-body .not-member { 
 
    text-align: center; 
 
    padding-top: 30px; 
 
} 
 

 
.modal-body .horizontal-line { 
 
    padding-top: 15px; 
 
    border-bottom: 2px solid #dedede; 
 
} 
 

 
.modal-body .bottom-message { 
 
    padding: 20px; 
 
    text-align: center; 
 
    font-size: 13px; 
 
} 
 

 
.modal-body .bottom-message { 
 
    background-color: #f8f8f8; 
 
} 
 

 
.modal-body .grey { 
 
    color: #a19997; 
 
} 
 

 
.navbar-nav .dropdown-menu > li > a { 
 
    color: #fff; 
 
    background-color: #4692e6; 
 
    text-align:left; 
 
    padding: 10px 30px; 
 
    border-bottom: 1px solid #fff; 
 
} 
 

 
.navbar-nav2 a { 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
    font-size: 12px; 
 
    font-weight: bold; 
 
    top:220px; 
 
} 
 

 
.navbar-nav2 .custom { 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
    font-size: 12px; 
 
    top:220px; 
 
} 
 

 

 
@media (min-width: 768px) { 
 
    .container, .modal-body { 
 
     width: 750px; 
 
    } 
 
    .top-buttons { 
 
    position: absolute; 
 
    top: 10px; 
 
/* i took this out because it was screwing things up display: inline-flex; */ 
 
    display: inline-flex; 
 
    } 
 
    .navbar-toggle { 
 
    display: none; 
 
    } 
 

 
    .navbar-nav > li:hover > a, .navbar-nav > li.active > a { 
 
    color: #aeaeae;  
 
    } 
 

 
    .navbar-nav > .dropdown { 
 
    position: relative; 
 
    } 
 

 
    .navbar-nav > .dropdown > .fa-caret-up { 
 
    position: absolute; 
 
    bottom: -4px; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    color:#4692e6; 
 
    display: none; 
 
    } 
 

 
    .navbar-nav .dropdown-menu > li > a { 
 
    width: 250px; 
 
    } 
 

 
    .navbar-nav > li:hover .dropdown-menu, .navbar-nav > li:hover > .fa-caret-up { 
 
    display: block; 
 
    padding:0; 
 
    } 
 
    .modal-body .vertical-line { 
 
    position: absolute; 
 
    height: 100%; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    } 
 

 
    .modal-body .vertical-line .line-color { 
 
    width: 1px; 
 
    background-color: #eee; 
 
    height: 87%; 
 
    position: absolute; 
 
    left: 50%; 
 
    } 
 

 
    .modal-body .vertical-line .vertical-message{ 
 
    display: block; 
 
    margin-top: 75px; 
 
    background-color: #fff; 
 
    color: #696463; 
 
    position: relative; 
 
    } 
 
} 
 

 
@media (min-width: 992px) { 
 
    .container { 
 
     width: 970px; 
 
    } 
 
} 
 
@media (min-width: 1200px) { 
 
    .container { 
 
     width: 1170px; 
 
    } 
 
} 
 

 
@media (max-width: 767px) { 
 
    body { 
 
    padding-top: 110px; 
 
    } 
 

 
.navbar { 
 
    background-color: #124780; 
 
    position: absolute; 
 
} 
 

 
    .separator { 
 
    display: none; 
 
    } 
 
    .modal-body .vertical-line { 
 
    display: block; 
 
    width: 100%; 
 
    float: left; 
 
    padding: 10px; 
 
    position: relative; 
 
    text-align: center; 
 
    } 
 

 
    .modal-body .vertical-line .line-color { 
 
    position: absolute; 
 
    width: 90%; 
 
    background-color: #eee; 
 
    top: 50%; 
 
    height: 1px; 
 
    left: 5%; 
 
    } 
 

 
    .modal-body .vertical-line .vertical-message{ 
 
    background-color: #fff; 
 
    color: #696463; 
 
    position: relative; 
 
    } 
 
    .logo-separator { 
 
    display: none; 
 
    } 
 
    .navbar { 
 
    max-height: 340px; 
 
    } 
 
    .navbar-nav, .navbar-nav .dropdown-menu, .navbar-nav2 { 
 
    display: none; 
 
    } 
 
    .navbar-nav.open, .navbar-nav .dropdown-menu.open, .navbar-nav2.open { 
 
    display: block; 
 
    } 
 
    .navbar .container { 
 
    width: 100%; 
 
    padding: 0; 
 
    margin: 0; 
 
    } 
 
    .navbar .container .navbar-header{ 
 
    position: relative; 
 
    width: 100%; 
 
    } 
 
    .navbar-toggle { 
 
    position: relative; 
 
    float: right; 
 
    padding: 9px 10px; 
 
    margin-top: 8px; 
 
    margin-right: 15px; 
 
    margin-bottom: 8px; 
 
    background-color: transparent; 
 
    background-image: none; 
 
    border: 1px solid transparent; 
 
    border-radius: 4px; 
 
    cursor: pointer; 
 
    } 
 
    .navbar-toggle .icon-bar { 
 
    display: block; 
 
    width: 22px; 
 
    height: 2px; 
 
    border-radius: 1px; 
 
    background-color: #fff; 
 
    } 
 

 

 
    .navbar-nav > .dropdown > .fa-caret-up { 
 
    display: none; 
 
    } 
 

 
    .navbar-header:before, .navbar-header:after{ 
 
    content: " "; 
 
    } 
 

 
    .navbar-toggle .icon-bar+.icon-bar { 
 
    margin-top: 4px; 
 
    } 
 

 
    .navbar .navbar-nav, .navbar .navbar-nav .dropdown-menu > ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    } 
 
    .navbar .navbar-nav >li>a { 
 
    background-color: #78b1eb; 
 
    } 
 
    .navbar .navbar-nav >li:hover>a { 
 
    background-color: #a6c6e6; 
 
    } 
 
    .navbar .navbar-nav >li>.dropdown-menu { 
 
    margin-bottom:0; 
 
    margin-top:0; 
 
    padding-bottom: 0; 
 
    padding-top: 0; 
 
    position: relative; 
 
    padding-left:0; 
 
    } 
 

 
    .navbar .navbar-nav >li>.dropdown-menu>ul>li>a { 
 
    color: #fff; 
 
    background-color: #aacef2; 
 
    text-align:left; 
 
    padding: 10px 30px; 
 
    border-bottom: 1px solid #fff; 
 
    } 
 

 
    .navbar .navbar-nav2 { 
 
    padding-top: 0; 
 
    position: relative; 
 
    top: 0; 
 
    height: auto; 
 
    } 
 

 
    .navbar .navbar-nav2 a { 
 
    display: block; 
 
    padding: 10px 15px; 
 
    border-bottom: 1px solid #aaa; 
 
    } 
 

 
    .navbar .navbar-nav2 a:hover { 
 
    background-color: #fff1f1; 
 
    color: #5d5aff; 
 
    } 
 

 
    .navbar .navbar-nav2 span.separator { 
 
    display: none; 
 
    } 
 

 
    .navbar ul li { 
 
    float: none; 
 
    } 
 

 
    .top-buttons { 
 
    position: absolute; 
 
    top: 10px; 
 
    right: 60px; 
 

 
    } 
 

 
    .col-50 { 
 
    width: 100%; 
 
    } 
 
}

<nav class="navbar"> 
 
     <div class="container clfix"> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle"> 
 
      <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      </button> 
 
      <a class="navbar-brand" href="#"><img src=./mylogo.jpg><img src=./mytextlogo.gif></a> 
 
      <div class="logo-separator"></div> 
 
     </div> 
 

 
     <div id="navbar"> 
 
      <ul class="nav navbar-nav"> 
 
      <li class="dropdown"> 
 
       <a href="#1">Menu Item 1</a> 
 
      </li> 
 
      <li class="separator">|</li> 
 
      <li class="dropdown"> 
 
       <a href="#2">Menu Item 1</a> 
 
      </li> 
 
      <li class="separator">|</li> 
 
      <li class="dropdown"> 
 
       <a href="#3">Menu Item 3</a> 
 
      </li> 
 
      <li class="separator">|</li> 
 
      </ul> 
 

 
      <div class="navbar-nav2"> 
 
      <div class="navbar-line"></div> 
 
      <div class="container" style="width:100%" align=center> 
 
       <a href="#">Secondary Menu 1</a> 
 
       <a href="#">Secondary Menu 2</a> 
 
      </div> 
 
      </div> 
 
     </div><!--/.nav-collapse --> 
 
//-------------------------------------------------------------------------------------------- 
 
/* THIS IS WHERE I WANT A SEARCH BAR WITH ICON TO EXPAND/CONTRACT BASED ON BROWSER WIDTH 
 
//-------------------------------------------------------------------------------------------- 
 
<div class=searchBar> 
 
    <input name=something type=text width=40><img src=./searchbutton.jpg> 
 
</div> 
 

 
//-------------------------------------------------------------------------------------------- 
 
/* I WANT THESE BUTTONS 'RIGHT' JUSTIFIED HERE 
 
//-------------------------------------------------------------------------------------------- 
 
     <div > 
 
     <ul class="top-buttons" style="width:100%;border-style:solid;border-width:2px;border-color:#FF0000;float:right"> 
 
      <li class="navbar-nav-button"><Button id="btn-login" class="btn btn-primary btn-sm">Log in</Button></li> 
 
      <li class="navbar-nav-button"><Button id="btn-signup" class="btn btn-default btn-sm">Sign Up</Button></li> 
 
     </ul> 
 
     </div> 
 
     </div> 
 
    </nav>

任何帮助，将不胜感激！

来源

2016-12-16 user6262902

这个问题的几个问题。首先，你是程序员吗？本网站用于帮助程序员，而不是根据请求提供代码。我们可以帮助您调试问题，而不是提供完成的生产代码。其次，你问了3个问题，这些都应该是单独的问题。第三，前两段与我们无关，并且在付款之后才提供代码是自由职业者的正确方式，他可能对他不得不为付款争取而不关心其代码的功能感到痛心。 – Goose

同意@Goose - 不支付，不提供服务。而这个网站是用于编程的问题，而不是免费为你的企业工作。这个问题的解决方案可以很容易地在网上找到，并且不会让更多的受众受益。 – Alic

是的，我是一名程序员。我需要帮助。我已经做了我能做的，似乎无法弄清楚的事情。 – user6262902

听起来像是你将需要明智地使用媒体查询：

@media screen and (min-width: 480px) { 
    body { 
     background-color: lightgreen; 
    } 
}

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

你已经表明你需要媒体查询三个器件尺寸：

small desktop 
[#1][#2][#3][#4] 

big desktop 
[#1][#2][<#3-------------------------->][#4] 

mobile 
[#1][#4] 
[#3---->]

现在您只需要为这三种尺寸创建媒体查询并相应地设置CSS。

手机：隐藏＃2。也许玩花车，让＃3显示在另外两个下面。
大桌面：更改＃3宽度（百分比基于最有可能的）
小型台式：＃1，＃2，＃3，＃4都应该有相同的宽度（基于最有可能的百分比）

然后可以使用宽度属性来调整按钮的大小，对这些不同的介质宽度：

http://www.w3schools.com/cssref/pr_dim_width.asp

来源

2016-12-16 15:11:02

这并没有什么帮助。我知道如何使用媒体quieries。我无法弄清楚如何完成我想完成的任务，这就是3件事情。 – user6262902

我的不好，我加了一个说明你如何使用我的回复。 –

...我知道如何使用媒体查询 - 我不“得到”如何正确地执行间距。 – user6262902

css - 文本框填充到宽度，右对齐按钮等

回答

相关问题