ASP造型不能正常工作

我正在爲我工作的公司的ASP網站工作。這是關於增加節省金錢或賺錢活動的概述，其中一位董事可以看。ASP造型不能正常工作

目前雖然我有一些樣式問題，在這裏使用bootstrap。

我相信，我曾經有過這個問題一次，但我如何解決它脫離了我。我無法將所有元素居中，也無法使輸入框與右側的插件連接，如圖所示。

<div class="container body-content" style="padding-top: 15px;"> 
    <div class="container" align="center"> 
     <div class="col-lg-8"> 
      <div class="row"> 
       <h2>Abstract</h2> 
       <div class="form-group"> 
        <div class="input-group" style="padding-bottom: 10px;"> 
         <span id="add-addon-styling" class="input-group-addon">FYE</span> 
         <select class="form-control required" id="new-activity-fye-dropdown"> 
          <option value="1">On Track</option> 
          <option value="2">Issue</option> 
          <option value="3">Behind</option> 
         </select> 
         <span class="input-group-addon" data-toggle="tooltip" data-placement="top" title="The Full Year Expectation of the Activity. Usually On Track on creation."> 
          <b>?</b> 
         </span> 
        </div> 
        <div class="input-group" style="padding-bottom: 10px;"> 
         <span id="add-addon-styling" class="input-group-addon">Activity Name</span> 
         <input type="text" class="form-control required" id="new-activity-modal-name-field" 
          aria-describedby="new-activity-modal-name-field" /> 
         <span class="input-group-addon" data-toggle="tooltip" data-placement="top" 
          title="The Name of the Activity. This name appears in the Activity Overview."> 
          <b>?</b> 
         </span> 
        </div> 
        <div class="input-group" style="padding-bottom: 10px;"> 
         <span id="add-addon-styling" class="input-group-addon">Responsible</span> 
         <input type="text" class="form-control required" id="new-activity-modal-responsible-field" 
          aria-describedby="new-activity-modal-responsible-field" disabled /> 
         <span class="input-group-addon" data-toggle="tooltip" data-placement="top" 
          title="The responsible person for this activity. This it the go-to person for questions, progress and reports."> 
          <b>?</b> 
         </span> 
        </div> 
        <!-- TODO: Find an automatic way to make this dropdown --> 
        <div class="input-group" style="padding-bottom: 10px;"> 
         <span id="add-addon-styling" class="input-group-addon">Department</span> 
         <select class="form-control required" id="new-activity-modal-department-dropdown"> 
          <!-- Handled in content-controller: CreateNewActivityDepartmentDropdown() --> 
         </select> 
         <span class="input-group-addon" data-toggle="tooltip" data-placement="top" 
          title="The department this activity belongs to."> 
          <b>?</b> 
         </span> 
        </div> 
        <div class="input-group" style="padding-bottom: 10px;"> 
         <span id="add-addon-styling" class="input-group-addon">Start Time</span> 
         <input class="form-control" type="text" id="new-activity-modal-datepicker-start" /> 
         <span class="input-group-addon" data-toggle="tooltip" data-placement="top" 
          title="The start of the activity. Usually today's date."> 
          <b>?</b> 
         </span> 
        </div> 
        <div class="input-group" style="padding-bottom: 10px;"> 
         <span id="add-addon-styling" class="input-group-addon">End Time</span> 
         <input class="form-control" type="text" id="new-activity-modal-datepicker-end" /> 
         <span class="input-group-addon" data-toggle="tooltip" data-placement="top" 
          title="The estimated end of the activity."> 
          <b>?</b> 
         </span> 
        </div> 
       </div> 
      </div> 
      <div class="row"> 
       <h2>Description</h2> 
       <div class="form-group"> 
        <div class="input-group"> 
         <span class="input-group-addon">Upload a thorough description explaining the Activity.</span> 
        </div> 

       </div> 
      </div> 
      <div class="row"> 
       <h2>Estimation</h2> 
       <div class="form-group"> 
        <div class="input-group" style="padding-bottom: 10px;"> 
         <span id="add-addon-styling" class="input-group-addon">AX Account Number(s)</span> 
         <input type="text" class="form-control required" id="new-activity-modal-ax-account-numbers-field" 
          aria-describedby="new-activity-modal-ax-account-numbers-field" /> 
         <span class="input-group-addon" data-toggle="tooltip" data-placement="top" 
          title="AX Account number associated with the activity. 
               Multiple accounts can be added separated by commas."> 
          <b>?</b> 
         </span> 
        </div> 
        <div class="input-group"> 
         <span class="input-group-addon">Upload the estimation calculations for the Activity.</span> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

我覺得我的HTML是相當正常的，但我很難從CSS文件在ASP中應用樣式。

我該如何讓右側的插件連接輸入字段？

UPDATE

看來，問題是裏面一個默認生成的文件名爲Site.css。它有以下內容：

input, 
select, 
textarea { 
    max-width: 280px; 
}

評論說，解決了這個問題。

來源

2016-01-27 OmniOwl

此代碼對我來說正確顯示。你可以嘗試使用ctrl + f5在瀏覽器中強制刷新，它可能會緩存舊樣式。如果這不起作用，我會使用瀏覽器檢查元素工具，並查看是否已覆蓋任何地方的引導程序樣式。 – Steve

頁面上的其他地方一定會破壞選擇框的樣式，因爲當我在codepen中查看您的代碼段時，在Chrome和IE11中，選擇框確實伸展到右側的問號框：

codepen.io/anon/pen/pgVoQg

順便說一句，內嵌樣式通常應該儘可能地避免

來源

2016-01-27 13:21:01 danwellman

是的，我通常不應用內聯樣式，但ASP樣式對我來說很奇怪。直接在不同的文件中應用css會有不同的結果。我會盡量把一些更多的信息。 – OmniOwl

好吧，我發現了這個問題。在默認的「網站。css「文件就是這行代碼：'input， select， textarea {0}最大寬度：280px; }'所以評論一下，修正了它 – OmniOwl

如果你在多個文件中聲明瞭css，你的參考文獻將優先考慮，如果你想確保使用某種風格，你可以在風格上使用！important標籤 – Steve

因爲我不知道ASP的CSS結構究竟如何，這裏是我會怎樣處理這種情況：

使用你的瀏覽器的檢查員來檢查究竟是什麼類型的css規則使「？」按鈕一直到右側，我只能假定它有一個浮點數，或者表單的右邊有一個巨大的餘量。

一旦您發現問題，您可以進一步使用瀏覽器的檢查器來測試一些編輯，如果這是一個保證金事件，請查看實際需要多少保證金，如果是浮動問題，請參閱它的外觀與浮動︰無

一旦你找到了問題的解決方案，你將需要應用它，做到這一點後，添加一個自定義的.css文件後，ASP的CSS文件，這種方式無論你寫在它會覆蓋任何現有的規則。

將修復添加到這個新文件，你應該完成。

來源

2016-01-27 13:23:44

我想通了，儘管我會評論你的答案:) – OmniOwl

ASP造型不能正常工作

回答

相關問題