Дизайн формы некорректно отображается в браузере, но хорошо выглядит в дизайне Visual Studio - PullRequest
Новая
       76

Дизайн формы некорректно отображается в браузере, но хорошо выглядит в дизайне Visual Studio

0 голосов
/ 29 мая 2020

Почему страница ASPX HTML отображается некорректно. Если я go в окне дизайна в VS, код CSS отображается правильно, но если я использую браузер (IIS Express Opera), кнопки отображаются в неправильном положении.

Я использовал Css чтобы кнопка перемещалась влево или вправо в Div-Box.

Дизайн в Visual Studio 2019 enter image description here

как это выглядит в браузере: enter image description here

Код: 

CSS
.div1 {
    background-color: red;
    width: 800px;
    height: 100%;
}

#ListPersonen {
    float: right;
}


.Fright {
    float: right;
}

.Fleft {
    float: left;
}

H3 {
    font-size: 20px;
    margin: 0;
    border: 0;
    padding: 0;
}


SiteMaster:
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="NetTest.SiteMaster" %>

<!DOCTYPE html>

<html lang="en">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%: Page.Title %> - Mannschaftsverwaltung</title>
    <link href="~/Css/MVStyle.css" rel="stylesheet" type="text/css" media="screen" runat="server"/>
    <asp:PlaceHolder runat="server">
        <%: Scripts.Render("~/bundles/modernizr") %>
    </asp:PlaceHolder>

    <webopt:bundlereference runat="server" path="~/Content/css" />
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <link href="~/Css/MVStyle.css" rel="stylesheet" type="text/css" media="screen" runat="server"/>
</head>

ASPX (HTML) 

<%@ Page Title="" Language="C#" MasterPageFile="~/View/Site.Master" AutoEventWireup="true" CodeBehind="Mannschaftsverwaltung.aspx.cs" Inherits="NetTest.View.Mannschaftsverwaltung" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">

   <h1>Mannschaftsverwaltung - Teams</h1> 
    <asp:Label ID="infoLabel" runat="server" Text="" Visible="false" ForeColor="Green" Font-Size="15"></asp:Label>
    <br /> 
  <h3> Mannschaften: </h3>
   <asp:ListBox ID="listMannschaften" runat="server" Width="200px" Height="75px" OnSelectedIndexChanged="listMannschaften_SelectedIndexChanged" AutoPostBack="true"></asp:ListBox>
   <br /> <br />
   <div class="div1">
   <div class="Fleft">
   <h3> Personen (Mannschaft) </h3>
   <asp:ListBox ID="ListPersonen" runat="server" Height="200px" Width="300px" AutoPostBack="true"></asp:ListBox>
   </div>
   <div class="Fright">
   <h3>Personen (Verfügbar) </h3>
   <asp:ListBox ID="ListVerfügbar" runat="server" Height="200px" Width="300px" AutoPostBack="true"></asp:ListBox>
   </div> </div> <br />
   <div class="div1">
   <div class="Fleft">
   <asp:Button ID="btn_del" runat="server" Text="Entfernen" Height="35px" Width="150" OnClick="btn_del_Click"/> 
   </div>
   <div class="Fright">
   <asp:Button ID="btn_add" runat="server" Text="Hinzufügen" Height="35px" Width="150" OnClick="btn_add_Click"/>
   </div> 
   </div>
   <h1>Mannschaftsverwaltung - Hinzufügen</h1> <br />
    <asp:TextBox ID="txtName" runat="server" Height="25px" Width="200px"></asp:TextBox> <br /> <br />
    <asp:DropDownList ID="DropDownList1" runat="server">
        <asp:ListItem>Fussball</asp:ListItem>
        <asp:ListItem>Tennis</asp:ListItem>
        <asp:ListItem>Handball</asp:ListItem>
    </asp:DropDownList> <br /> <br />
    <asp:Button ID="BtnAdd" runat="server" Text="Hinzufügen" OnClick="Button1_Click" />
</asp:Content>

Будет хорошо, если кто-то может помочь :)

Большое спасибо

ОБНОВЛЕНИЕ: Я решил проблему, изменив высоту Divbox со 100% на 250 пикселей! 

.div1 {
    background-color: red !important;
    width: 800px;
    height: 270px;
}

.div2 {
    background-color: blue !important;
    width: 800px;
    height: 50px;
}
...