Question

我刚刚下载了bootstrap的某些部分，它搞砸了我网站某些元素的定位。

1）我无法完全改变发送按钮的样式。
2）输入您的电子邮件地址的文本输入栏出现在文本下方，我无法在文本旁边显示。 3）我无法将搜索栏定位在右侧。我想把它一直漂到右边。我认为它没有这样做的原因是因为它已经是一部分了，并且不知怎的，它正在弄乱它。我怎样才能让它一直漂到右边？

有什么建议吗？

这是我的代码：

application.html.erb

<!DOCTYPE html>
<html>
<head>
  <title><%= yield(:title) %></title>
  <%= stylesheet_link_tag    "layout", :media => "all" %>
  <%= javascript_include_tag "application" %>
  <%= favicon_link_tag 'favicon.ico' %>
  <link rel="shortcut icon" href="/favicon.ico" />
  <%= csrf_meta_tags %>
  <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-42526156-1', 'collegeanswerz.com');
    ga('send', 'pageview');
  </script>
</head>
<body>
    <header>        
        <p id="sign_in">
            <%= link_to "be a mentor", "/mentor" %><br />
            <%= link_to "find a mentor", "/find-a-mentor" %><br /><br /><br />
        </p>

        <div class="idea_bar">
            <div class="left_idea_bar">
                <p>Ideas, comments, questions, suggestions?  Help us help you!</p>
                <%= form_tag("/application_controller/email", :method => "post", :id => "idea_bar_form") do %>
                    <%= text_area_tag('message', nil, :size => "60x4", :id => "message", :name => "message") %> <br />
                    <%= label_tag(:email, "• include your email if you want a response:") %>
                    <%= text_field_tag(:email, nil, :id => "email", :size => "36", :name => "email") %>
            </div>
                    <button id="submit" type="submit" form="idea_bar_form"><span id="big_submit">Send</span>
                    <span id="small_submit"><br />&#8226 one click<br />&#8226 anonymous</span></button>
                <% end %>
        </div>

        <nav id="main_nav">
            <hr />
            <ul>
                <li id="logo"><%= link_to image_tag('favicon.png', size: "50x50", alt: "CollegeANSWERZ"), '/' %></li>
                <li><%= link_to 'Colleges', '/colleges' %></li>
                <li> | </li>
                <li><%= link_to 'About College', '/about-college' %></li>
                <li> | </li>
                <li><%= link_to 'Essays', '/essays' %></li>
                <%= form_tag("/search", :method => 'get') do -%>
                    <li id="search"> <%= search_field_tag :search, params[:search], :placeholder => 'enter college' %></li>
                <% end -%>
            </ul>
            <hr />
        </nav>
    </header>

    <div class="container">
        <%= yield %>
    </div>

</body>
</html>

layout.css.scss

@import "bootstrap";

/* universal */

body {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 14px;
    clear: left;
    width: 900px;
    h1, h2, h3, h4, h5, h6 {
        font-family: Georgia, serif;
    }
    h1 {
        font-family: Helvetica Neue !important;
        text-align: center;
        color: rgba(24, 21, 21, 0.8);
        font-size: 60px;
    }
    margin-bottom: 50px;
    a {
        text-decoration: none;
    }
}


/* sign in */

#sign_in {
    float: right;
    font-size: 10px;
    margin-right: 10px;
    a {
        text-decoration: underline;
    }
}


/* idea bar */
.idea_bar {
    background-color: rgba(0, 0, 0, 0.02);
    margin-top: 10px;
    padding-bottom: 80px;
    padding-left: 20px;
    .left_idea_bar {
        float: left;
    color: #999;
    }
    input[type="text"] {
        float: left;
        clear: none;
        padding: 4px 4px 3px 4px;
        font-size: 12px;
    }
    #submit {
        margin-top: 47px;
        background: #EBEBEB;
        border: 1px solid #bbb;
        border-radius: 3px;
        -webkit-box-shadow: inset 0 0 1px 1px #f6f6f6;
        box-shadow: inset 0 0 1px 1px #f6f6f6;
        color: #666;
        font-family: Verdana, Geneva, sans-serif;
        padding: 8px 0 9px;
        text-align: center;
        text-shadow: 0 1px 0 #fff;
        width: 120px;
        height: 91px;
        #big_submit { font-size: 18px;}
        #small_submit { font-size: 10px; margin-top: 100px;}
        &:hover {
            background: #d9d9d9;
            -webkit-box-shadow: inset 0 0 1px 1px #eaeaea;
            box-shadow: inset 0 0 1px 1px #eaeaea;
            color: #222;
            cursor: pointer;
        }
        &:active {
            background: #d0d0d0;
            -webkit-box-shadow: inset 0 0 1px 1px #e3e3e3;
            box-shadow: inset 0 0 1px 1px #e3e3e3;
            color: #000;
        }
    }
    textarea {
        padding: 6px;
        font-size: 14px;
        margin-bottom: 12px;
        width: 450px;
        margin-right: 20px;
    }
}


/* main navigation */

#main_nav {
    clear: both;
    ul {
        width: 840px;
        height: 10px;
        margin-top: -2px;
        margin-bottom: 5px;
        background-color: #E6F0FF;
        padding: 30px;
        float: left;
        list-style-type: none;
        #logo {
            margin-right: 125px;
            margin-top: -20px;
            font-weight: bold;
            font-size: 16px;
        }
        input[type="search"] {
            font-size: 12px;
            font-family: Verdana, Geneva, sans-serif;
            width: 175px;
        }
        li {
            margin-top: -5px;
            margin-right: 45px;
            float: left;
            font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
        }
        a {
            text-decoration: none;
            font-weight: bold;
            color: blue;
            font-size: 16px;
        }
    }
}


/* container */

.container {
    clear: both;
}

Answer 1

首先你必须编辑你的HTML

您无法在form内使用ul元素，因为它无效。只需将form放到上一个li或在ul元素之后使用它，这样就可以将它浮动到右边。如果您希望textarea旁边的文字框用div打包，并将div向左浮动。

编辑：

刚刚编辑了你的html，你可以对它进行一些Css修改：

<div class="idea_bar">
  <div class="left_idea_bar">
    <form method="post" id="idea_bar_form" action="/application_controller/email" accept-charset="UTF-8">
      <div style="margin:0;padding:0;display:inline">
        <input type="hidden" value="✓" name="utf8">
        <input type="hidden" value="LxYk26gr0kt4jHn9lhSgwdywC8lotwEAqT3od0rsRiA=" name="authenticity_token">
      </div>
      <p>Ideas, comments, questions, suggestions?  Help us help you!</p>
      <div class="Left">
        <textarea rows="4" name="message" id="message" cols="60"></textarea>
      </div>
      <div class="Left">
        <label for="email">• include your email if you want a response:</label><br>
        <input type="text" size="36" name="email" id="email"><br>
        <button form="idea_bar_form" type="submit" id="submit"><span id="big_submit">Send</span> <span id="small_submit"><br>
        • one click<br>
        • anonymous</span></button>
      </div>
    </form>
  </div>
</div>

您只需要将left类添加到您的CSS中，以便可以浮动它们

将最后一个<li>浮动到右侧</li>

1 个答案: