如何定位提交按钮，HTML

时间：2014-06-28 00:12:43

标签： html button web

我是HTML的新手，我在定位按钮方面遇到了一些麻烦。在我的网页顶部，在导航栏中我有几个图标，我还想添加一个按钮。我希望按钮位于图标的末尾。任何人都可以帮助我吗？以下是我设置代码的方法。

<!-- icon 1 -->
<li class="customer">
{% if customer  %}
<a href="/account"><i class="icon-user"></i></a>
{% else %}
<a href="/account/login"><i class="icon-user"></i></a>
{% endif %}
</li>

<!-- icon 2 -->
<li class="cart-overview"><a href="/cart"><i class="icon-shopping-cart"></i><span id="item_count">{{ cart.item_count }}</span></a>
<div id="crt">
{% include 'shopping-cart' %}
{% if cart.item_count != 0 %}
<a class="checkout-link" href="/cart">checkout</a>
{% endif %}
</div>                               
</li>

<!-- BUTTON icon -->
<li class="toolbar_btn">
<div id="btn">      
<form method="post" action="/cart/add" data-money-format="$ {{amount}}" id="product-form-288451297">
<input type="hidden" id name="id" value="680177761">
<div id="product-add">
<input type="submit" name="button" value="Buy Now" style="height: 40px; width: 100px">   
<p id="add-to-cart-msg"></p>
</div>
</form> 
</div> 
</li>

样式看起来我想要它，我只需要移动按钮。这是一个截图。在此先感谢!!

enter image description here

更新：有很多请求要查看css。我认为你想看看stylesheet.css文件。我不知道这个文件的哪个部分很重要，所以我发布了尽可能多的内容。希望你能在这里帮助我。

/* =============== */
/* = Start CSS = */
/* =============== */


header, #logo img, #logo {
  transition: all .3s;
  -moz-transition: all .3s; /* Firefox 4 */
  -webkit-transition: all .3s; /* Safari and Chrome */
  -o-transition: all .3s; /* Opera */
}


header{
  float: left;
  width: 100%;
  position: fixed;
  z-index: 5;
  top: 0;
}


/* Sizes for the bigger menu */
header.large{
  height: 80px;
  line-height: 80px;
  overflow: hidden;
    white-space: nowrap;
}

header.large img, header.large #logo {
  height: 80px;
  line-height: 80px;

}


/* Sizes for the smaller menu */
header.small{ 
  height: 50px; 
  line-height: 50px;
  overflow: hidden;
    white-space: nowrap;
}

header.small img, header.small #logo { 
  height: 50px;  
  line-height: 50px;
}


#searchbox {
  position: absolute;
  top: 50%;
  margin-top: -24px;
  margin-left: 0;
  display: none;
}



#content { margin-bottom: 50px; margin-top: 100px; position: relative; }

.smallcash {
    font-size: 12px;
    margin-left: 5px;
}

#logo { margin: 0; padding: 0; }
#logo a { font-family: {{ settings.logo-font }}; font-size: {{ settings.logo-size }}; text-transform: {{ settings.logo-transform }}; font-weight: {{ settings.logo-weight }}; color: {{ settings.logo-color }}; text-decoration: none; }

nav { 
  background: {{ settings.navigation }};
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.33);
  -moz-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.33);
  -webkit-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.33);
}



#navigation {
    padding: 0;
    position: relative;
}


.mnav { display: none; }

ul#nav {  
  list-style: none;
  float: right;
  text-align: right;
}

ul#nav li {
    display: inline-block;
    position: relative;
    z-index: 21;
    -webkit-transition: background .5s ease,color .5s ease;
    -moz-transition: background .5s ease,color .5s ease;
    -o-transition: background .5s ease,color .5s ease;
    transition: background .5s ease,color .5s ease;
}

ul#nav li:hover {
    color: {{ settings.nav_hover_link_color }};
    background: {{ settings.nav_hover_color }};

}

ul#nav li a {
    font-size: {{ settings.nav_size }};
    font-weight: {{ settings.nav_weight }};
    color: {{ settings.nav_color }};
    font-family: {{ settings.navigation-font }};
    display: block;
    padding: 0 10px 0 10px;
    text-transform: {{ settings.navigation-transform }};
    letter-spacing: 1px;
}

ul#nav li a:hover {
    background: {{ settings.nav_hover_color }};
    color: {{ settings.nav_hover_link_color }};
    text-decoration: none;
}

ul#nav li ul{
    display: none;
    background: {{ settings.dropdown_background_color }}! important;
    float: left;
    position: absolute;
    left: 0;
    z-index: 25;
    margin: 0;
    padding: 0;
    line-height: 40px! important;
    -webkit-transition: background .5s ease,color .5s ease;
    -moz-transition: background .5s ease,color .5s ease;
    -o-transition: background .5s ease,color .5s ease;
    transition: background .5s ease,color .5s ease;
}


ul#nav li:hover ul{
    display: block;
    background: {{ settings.dropdown_background_color }}! important;
}

ul#nav li ul li{
    background: {{ settings.dropdown_background_color }};
    color: {{ settings.nav_dropdown_color }};
    width: 180px;
    text-align: left;
}


ul#nav li ul li:hover {
    background: {{ settings.dropdown_hover_background_color }};
}

ul#nav li ul li a:hover {
    color: {{ settings.dropdown_hover_link_color }};
    background: {{ settings.dropdown_hover_background_color }};
}

ul#nav li ul li a{
    text-align: left;
     font-size: {{ settings.dropdown-font-size }};
    padding-left: 10px;
    color: {{ settings.nav_dropdown_color }};
    text-transform {{ settings.dropdown-transform }}! important;
}

.down {
    float: right;
    margin-top: -31px;
    margin-right: 7px;
    font-weight: bolder;
    font-size: 10px;
    color: {{ settings.nav_color }};
}

nav.primary select { display: none; }

#nav-border {
    margin-top: 20px;
    margin-bottom: 20px;
    height: 1px;
    background: {{ settings.dotted_color }};
    position: relative;
}

#navigation #q { background: {{ settings.navigation }};  height: 39px; line-height: 39px;  border: 0 none; border-left: 1px solid {{ settings.nav_hover_color }}; letter-spacing: 1px; color: {{ settings.nav_color }};
    font-size: {{ settings.nav_size }};
    font-weight: {{ settings.nav_weight }};
    font-family: {{ settings.navigation-font }};
    padding: 0;
    margin: 0;
}
#navigation #q:focus { color: {{ settings.nav_color }}; 
    -moz-box-shadow: 0 0 3px rgba(255,255,255,.1);
    -webkit-box-shadow: 0 0 3px rgba(255,255,255,.1);
    box-shadow: 0 0 3px rgba(255,255,255,.1);
}

.nav-search:hover {
    background: transparent! important;
}

ul#nav li.got-dropdown a:after { font-family: FontAwesome; content:"\f078"; margin-left: 0.5em; font-size: 8px; }
.submenu li a:after { content: initial! important; }

#nav
{
    /* container */
}
    #nav > a
    {
        display: none;
    }

1 个答案:

答案 0 :(得分：0)

问题绝对是CSS类和父母， 顺便说一下，编辑这些标签可能会解决问题：

<li class="cart-overview" style="float:left">

并且：

<li class="toolbar_btn" style="float:right">
相关问题
最新问题