Не может быть элемент центрального диапазона

У меня есть три элемента на верхней части моей веб-страницы. Я ожидаю, что они будут расположены слева, в центре и справа. Тем не менее, тот, кто находится в центре, является педерастом (частично потому, что он создан в конце игры). Я пробовал трюки с автоматической маркой без везения. Я пробовал относительное позиционирование, но не могу получить его идеально сосредоточенным (и он опирается на своих соседей). В полном коде ниже вы можете получить «showInMiddle» в центре? Вам нужно нажать кнопку входа для этого элемента, чтобы он появился. В идеале, элементы будут обертываться, если страница была слишком узкой, но все же сохраняла их выравнивание (а не рисование сверху друг друга или все слева).Не может быть элемент центрального диапазона

<!DOCTYPE html> 
<html> 
<head> 
    <title>This is dumb</title> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
    <script type="text/javascript" src="http://knockoutjs.com/js/knockout-2.1.0.js"></script> 
</head> 
<body style="font-family: 'Segoe UI'; margin: 5px 20px;"> 

<header style="width: 100%"> 

<h4 id="showOnLeft" style="font-size: 1.1em; display: inline;">I'm the title</h4> 

<span id="showInMiddle" data-bind="visible: LoggedIn"> 
    I'm supposed to be in the middle with my two buttons. 
    <button>B1</button> 
    <button>B2</button> 
</span> 

<div id="showOnRight" style="display: inline; float: right"> 
    <form id="someLoginForm" style="display: inline;" data-bind="visible: !LoggedIn(), submit: login" action="" method="post"> 
     <input type="text" placeholder="Username" /> 
     <input type="password" placeholder="Password" /> 
     <input type="submit" value="Login" /> 
    </form> 
    <form id="someLogoutForm" style="display: inline;" data-bind="visible: LoggedIn(), submit: logout" action="" method="post"> 
     <span>Howdy</span> 
     <input type="submit" value="Logout" /> 
    </form> 
</div> 

<nav><hr/></nav> 

</header> 

<script type="text/javascript"> 

    function LoginViewModel() { 
     var self = this; 
     self.LoggedIn = ko.observable(false); 
     self.login = function (formElement) { self.LoggedIn(true); }; 
     self.logout = function (formElement) { self.LoggedIn(false); }; 
    } 

    ko.applyBindings(new LoginViewModel()); 

</script> 

</body> 
</html>

источник

2012-05-18 Brannon

Проверьте http://jsfiddle.net –

В конечном итоге это работает безупречно, когда вы используете стол. Кто знал?

<!DOCTYPE html> 
<html> 
<head> 
    <title>This is dumb</title> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
    <script type="text/javascript" src="http://knockoutjs.com/js/knockout-2.1.0.js"></script> 

    <style type="text/css"> 
     table, tr, td, h4, div { margin: 0px; padding: 0px; } 
    </style> 
</head> 
<body style="font-family: 'Segoe UI'; margin: 5px 20px;"> 

<header style="width: 100%"> 

<table style="width: 100%; border-width: 0px;"> 
<tr> 
<td><h4 id="showOnLeft" style="font-size: 1.1em;">I'm the title</h4></td> 
<td> 
<div id="showInMiddle" data-bind="visible: LoggedIn" style="text-align: center;"> 
    I'm supposed to be in the middle with my two buttons. 
    <button>B1</button> 
    <button>B2</button> 
</div> 
</td> 
<td> 
<div id="showOnRight" style="text-align: right;"> 
    <form id="someLoginForm" style="display: inline;" data-bind="visible: !LoggedIn(), submit: login" action="" method="post"> 
     <input type="text" placeholder="Username" /> 
     <input type="password" placeholder="Password" /> 
     <input type="submit" value="Login" /> 
    </form> 
    <form id="someLogoutForm" style="display: inline;" data-bind="visible: LoggedIn(), submit: logout" action="" method="post"> 
     <span>Howdy</span> 
     <input type="submit" value="Logout" /> 
    </form> 
</div> 
</td> 
</tr> 
</table> 

<nav><hr/></nav> 

</header> 

<script type="text/javascript"> 

    function LoginViewModel() { 
     var self = this; 
     self.LoggedIn = ko.observable(false); 
     self.login = function (formElement) { self.LoggedIn(true); }; 
     self.logout = function (formElement) { self.LoggedIn(false); }; 
    } 

    ko.applyBindings(new LoginViewModel()); 

</script> 

</body> 
</html>

источник

2012-05-19 00:35:37 Brannon

На самом деле, я бы предложил таблицу, которая будет намного проще, но мы будем хмуриться от веб-разработчиков. Но лично, не волнуйся .. все работает отлично. :) – netrox

Таблицы не так уж плохи ... На мой взгляд, для построения целого макета с использованием одного из них возникают проблемы при рендеринге на определенных браузерах и при определенных разрешениях ... Но использование таблиц для определенных частей макета и их кодирование, чтобы избежать упомянутые недостатки, как правило, отлично подходят для меня. Совсем немного сложнее, чем стиль. –

Существующие стандарты HTML подчеркивают, что таблицы передают табличные данные (электронные таблицы, календарь и т. Д.), А не как макет. Но как макет, мальчик, HTML-таблицы невероятно эффективны, последовательны и интуитивно понятны. Он ведет себя последовательно во всех браузерах со всеми свойствами, установленными на ноль. Но с помощью CSS3 вы можете указать, какие элементы следует рассматривать как «таблицу», что означает, что вы можете создавать макеты с элементами, которые рассматриваются как «таблица» - больше информации на http://www.digital-web.com/articles/ everything_you_know_about_CSS_Is_wrong / – netrox

Вы не можете центрировать диапазон, потому что это встроенный элемент, который по умолчанию не знает его ширины.

Вы можете просто заменить пролет с DIV, как это (смотреть встроенный CSS):

<div id="showInMiddle" data-bind="visible: LoggedIn" style="text-align:center "> 
I'm supposed to be in the middle with my two buttons. 
<button>B1</button> 
<button>B2</button> 
</div>

Это быстро - я отправляюсь домой. Попробуйте настроить ширину, в которой используется форма входа. Вы должны знать, что общая сумма floatdiv никогда не должна превышать общую сумму контейнера, иначе она пойдет не так.

<!DOCTYPE html> 
<html> 
    <head> 
     <title> 
      This is dumb 
     </title> 
     <style> 
     #container { 
      width:900px; 
      margin: auto 0; 
      overflow: auto;   

     }   
     .floatdiv { 
      float:left; 

      margin:0;       

     } 

     </style>   

    </head> 

    <body style="font-family: 'Segoe UI'; margin: 5px 20px;"> 
    <div id="container"> 

      <div class="floatdiv" style="font-size: 1.1em; width:200px"> 
       I'm the title                 
      </div> 
      <div class="floatdiv" id="showInMiddle" data-bind="visible: LoggedIn" style="text-align:center; width:300px "> 

       <button> 
        B1 
       </button> 
       <button> 
        B2 
       </button>    
      </div> 
      <div class="floatdiv" id="showOnRight" style="width:300px; float:right; text-align:right"> 
       <form id="someLoginForm" style="" data-bind="visible: !LoggedIn(), submit: login" action="" method="post"> 
        <input type="text" placeholder="Username" /> 
        <input type="password" placeholder="Password" /> 
        <input type="submit" value="Login" /> 
       </form> 
       <form id="someLogoutForm" style="" data-bind="visible: LoggedIn(), submit: logout" action="" method="post"> 
        <span> 
         Howdy 
        </span> 
        <input type="submit" value="Logout" /> 
       </form> 
      </div> 

     </header> 
    </div>   

    </body> 

</html>

источник

2012-05-18 23:18:06 netrox

Это верно, однако вы можете настроить его позиционирование. См. Это http://stackoverflow.com/questions/8792343/css-cannot-get-one-spanned-style-to-override-another-inherited-style-and-align –

Это решение не работает. Он не только помещает средний элемент в свою линию, но и заставляет правый элемент на третью строку. Я хочу, чтобы все три элемента были в одной строке/строке. – Brannon

Собственно, для этого потребуется переписать ваш HTML ... что довольно просто. Хочу увидеть это? – netrox

Не может быть элемент центрального диапазона

ответ

Смежные вопросы