Элемент кнопки навигации, растянутый по странице

Question

Довольно новый дизайнер, проблема с моей кнопкой на панели навигации. В настоящее время его ширина составляет всего 100 пикселей, и он зафиксирован на месте, поэтому позволяет прокручивать остальную часть страницы по нему. Но он по-прежнему занимает всю страницу, поэтому, когда другие ссылки параллельны ему, они не работают, я полагаю, потому что они находятся под div. вот мой html:

<div class="sideNavButton" onclick="openNav()"
         width="100px" >
        <span>
        <small class="form-text text-muted">links
        </small>
        <img th:src="@{../../images/RunshareLogo.jpg}"
             width="100px"
             style="border-style:outset; border-color:silver;"
        height="100px" />
        </span>
    </div>

и вот мой CSS:

.sideNavButton {
    top:0px;
    display:inline;
}

, кнопка работает отлично, но я бы хотел, чтобы она работала только внутри квадрата. Когда у меня есть display: inline, он работает только в квадрате, но он по-прежнему блокируется по экрану, и если я действительно показываю: block, он активирует боковую панель навигации, если вы щелкаете в любом месте параллельно кнопке. введите описание изображения здесь

Это изображение того, о чем я говорю. Квадрат «RunShare» - это навигационная кнопка, а маленькие стрелки в заголовке таблицы изменяют представление на различные отсортированные представления. Все они работают нормально, но когда заголовок таблицы параллелен навигационной кнопке, курсор не меняется на значок пальца, и вы не можете нажимать стрелки.

Answer 1

Обнаружил, что когда я добавил «float: left», он перестал блокироваться по экрану:

.sideNavButton {
    top:0px;
    display:inline;
    width:100px;
    float:left;
}

Answer 2

Попробуйте установить ширину в CSS.

HTML

<div class="sideNavButton" onclick="openNav()">
    <span>
    <small class="form-text text-muted">links
    </small>
    <img th:src="@{../../images/RunshareLogo.jpg}"
         width="100px"
         style="border-style:outset; border-color:silver;"
    height="100px" />
    </span>
</div>

CSS

.sideNavButton {
top:0px;
display:inline;
width: 100px; /*or 10vw(if your prefer viewport width)*/
}